W3C compliant PictoBrowser
Back in March I wrote an article on fixing a number of HTML 4.01 strict errors in order to try to get our holiday cottage home website to be W3C compliant.
At the time I concluded with acknowledging that there were two remaining obstinate problems, the fix I introduced to center-align a clickable image isn't compliant and neither is the Pictobrowser photo gallery.
I've noticed from my website logs since I wrote that article that a number of people have come across the Blog since then, looking for details of how to make the PictoBrowser HTML W3C compliant, and since I subsequently did work out how to fix the problem, I thought I'd pass on my experiences, and at the same time would actually get around to implementing the fix I'd found!
Pictobrowser gives you a natty little Flash-based way of viewing photos from your Flickr photo album, but does this at the expense of browser and W3C compatibility.
Pictobrowser automatically generates the HTML you need to embed into your website page, which looks like this:
This HTML is a slight variant of the so called classic "twice cooked" method of embedding Flash into a website, the <object> tag is there for IE browsers and the <embed> tag is there for Netscape based browsers. Although this works most of the time, the "align=middle" isn't valid in HTML 4.01, the <embed> tag has never been part of the HTML standard, and so if you run the default pictobrowser HTML through the w3C validator you'll end up with a slew of validation errors
Turning to one of my favourite sources of website help, A List Apart, and trawling through all their articles about Flash development, I came across Drew McLellan's Flash Satay article which describes how to drop the <embed> tag and use a simple "container" flash movie that would then auto-load your main movie.
Also on ALA I found Bobby van der Sluis's Flash Embedding Cage Match which describes the cross-browser support problem in far more detail than mere mortals like I can do and describes the embedded-object solution for better standards compliance.
I tried dallying with the embedded-object solution and works in Firefox and IE and if you strip out all the </param> tags it cuts the number of W3C validator errors from 19 down to 1, still with an errant error message from the align=middle coding, but I didn't really like the way it required calling the flash player ActiveX control in IE by using a Windows-specific GUID - this just looked horrible.
Looking back as I write this article now I remember that another of the reasons I rejected the nested object approach was that there was a problem when viewing the page in IE that required you to click-to-activate the Flash active-X control (a behaviour introduced by Microsoft in 2006 as a result of a patent infringement problem). This issue has now gone away as Microsoft's agreed a licence agreement to resolve the patent dispute, and as from April 2008 the click-to-activate functionality has been removed from IE.
Bobby van der Sluis concluded with describing how he felt the strategy for Flash-embedding was to combine the best of the two competing Flash embed solutions, UFO and SWFObject, into a new collaborative projects, SWFfix.
SWFfix is still going strong, there was a new release launched recently on the SWFfix Blog, and the JavaScript is freely available to download from Google Code, but after giving it a play I decided it was all too complicated and adding more JavaScript to my website just wasn't the way I wanted to go.
So there I got stuck for a while until I came back to the seminal Flash Satay article on ALA.
In it Drew McLellan carefully step by step re-engineers the twice-cooked Flash player approach into a standards-compliant approach that works across all different browsers. Drew's realised though that IE waits until the whole Flash movie file is loaded before it starts playing it, i.e. it doesn't start streaming it from the start like 'proper' browsers do. His solution to this problem which becomes particularly acute for large flash movies was to introduce a small "sacrificial" flash file that loads quickly and then starts streaming in the main file.
For me though this isn't a problem as the pictobrowser.swf file is only 8Kb in size, way smaller than some pictures on my website, so any delay in loading it is hardly noticeable.
The solution was therefore before me, to simply take the standards-compliant code that Drew had produced in Flash Satay and exclude the last bit of the sacrificial flash file to stream in the "main" file.
The resultant HTML thus looks like this:
And then I surrounded this all within a <blockquoute><div> to indent pictobrowser a little instead of worrying about including an align=middle which isn't valid HTML.
The <span> in the middle is a bit of HTML that's displayed if the browser can't display the Flash movie - prompting the visitor to download the Flash player from the Adobe site.
This new website page passes OK through the W3C validator, it displays properly in all the browsers I've tried, job done methinks!
Update 27/7/08: Found out that an AdBlock bug when used with Firefox 3 causes Flash files not to load in Firefox 3. Until Adblock is corrected I'm not going to implement this change
At the time I concluded with acknowledging that there were two remaining obstinate problems, the fix I introduced to center-align a clickable image isn't compliant and neither is the Pictobrowser photo gallery.
I've noticed from my website logs since I wrote that article that a number of people have come across the Blog since then, looking for details of how to make the PictoBrowser HTML W3C compliant, and since I subsequently did work out how to fix the problem, I thought I'd pass on my experiences, and at the same time would actually get around to implementing the fix I'd found!
Pictobrowser gives you a natty little Flash-based way of viewing photos from your Flickr photo album, but does this at the expense of browser and W3C compatibility.
Pictobrowser automatically generates the HTML you need to embed into your website page, which looks like this:
<object width="500" height="500" align="middle">
<param name="FlashVars" VALUE="ids=pictobrowser& names=pictobrowser& userName=www.giteinbrittany.com & ..."> </param>
<param name="PictoBrowser" value="http://www.db798.com/pictobrowser.swf">
... some more param's ommitted
<embed src="http://www.db798.com/pictobrowser.swf" FlashVars="ids=pictobrowser& names=pictobrowser& userName=www.giteinbrittany.com &... " loop="false" scale="noscale" bgcolor="#DDDDDD" width="500" height="500" name="PictoBrowser" align="middle">
</embed></object>
<param name="FlashVars" VALUE="ids=pictobrowser& names=pictobrowser& userName=www.giteinbrittany.com & ..."> </param>
<param name="PictoBrowser" value="http://www.db798.com/pictobrowser.swf">
... some more param's ommitted
<embed src="http://www.db798.com/pictobrowser.swf" FlashVars="ids=pictobrowser& names=pictobrowser& userName=www.giteinbrittany.com &... " loop="false" scale="noscale" bgcolor="#DDDDDD" width="500" height="500" name="PictoBrowser" align="middle">
</embed></object>
This HTML is a slight variant of the so called classic "twice cooked" method of embedding Flash into a website, the <object> tag is there for IE browsers and the <embed> tag is there for Netscape based browsers. Although this works most of the time, the "align=middle" isn't valid in HTML 4.01, the <embed> tag has never been part of the HTML standard, and so if you run the default pictobrowser HTML through the w3C validator you'll end up with a slew of validation errors
Turning to one of my favourite sources of website help, A List Apart, and trawling through all their articles about Flash development, I came across Drew McLellan's Flash Satay article which describes how to drop the <embed> tag and use a simple "container" flash movie that would then auto-load your main movie.
Also on ALA I found Bobby van der Sluis's Flash Embedding Cage Match which describes the cross-browser support problem in far more detail than mere mortals like I can do and describes the embedded-object solution for better standards compliance.
I tried dallying with the embedded-object solution and works in Firefox and IE and if you strip out all the </param> tags it cuts the number of W3C validator errors from 19 down to 1, still with an errant error message from the align=middle coding, but I didn't really like the way it required calling the flash player ActiveX control in IE by using a Windows-specific GUID - this just looked horrible.
Looking back as I write this article now I remember that another of the reasons I rejected the nested object approach was that there was a problem when viewing the page in IE that required you to click-to-activate the Flash active-X control (a behaviour introduced by Microsoft in 2006 as a result of a patent infringement problem). This issue has now gone away as Microsoft's agreed a licence agreement to resolve the patent dispute, and as from April 2008 the click-to-activate functionality has been removed from IE.
Bobby van der Sluis concluded with describing how he felt the strategy for Flash-embedding was to combine the best of the two competing Flash embed solutions, UFO and SWFObject, into a new collaborative projects, SWFfix.
SWFfix is still going strong, there was a new release launched recently on the SWFfix Blog, and the JavaScript is freely available to download from Google Code, but after giving it a play I decided it was all too complicated and adding more JavaScript to my website just wasn't the way I wanted to go.
So there I got stuck for a while until I came back to the seminal Flash Satay article on ALA.
In it Drew McLellan carefully step by step re-engineers the twice-cooked Flash player approach into a standards-compliant approach that works across all different browsers. Drew's realised though that IE waits until the whole Flash movie file is loaded before it starts playing it, i.e. it doesn't start streaming it from the start like 'proper' browsers do. His solution to this problem which becomes particularly acute for large flash movies was to introduce a small "sacrificial" flash file that loads quickly and then starts streaming in the main file.
For me though this isn't a problem as the pictobrowser.swf file is only 8Kb in size, way smaller than some pictures on my website, so any delay in loading it is hardly noticeable.
The solution was therefore before me, to simply take the standards-compliant code that Drew had produced in Flash Satay and exclude the last bit of the sacrificial flash file to stream in the "main" file.
The resultant HTML thus looks like this:
<object type="application/x-shockwave-flash" width=580 height=580 data="/theme/pictobrowser.swf">
<param name=movie value="/theme/pictobrowser.swf" >
<param name=FlashVars VALUE="ids=pictobrowser& names=pictobrowser& userName=www.giteinbrittany.com& userId=53897043@N00& titles=on& source=keyword">
<param name=scale value=noscale>
<param name=bgcolor value="#ffffff">
<span>Unfortunately we are unable to display our Brittany photo gallery in your browser as you do not appear to have the free Adobe Flash player installed.<br><br>Visit the <a href="http://www.adobe.com/go/getflashplayer" onclick="target='_blank';">Adobe Flash download centre</a> to get the latest version.</span>
</object>
<param name=movie value="/theme/pictobrowser.swf" >
<param name=FlashVars VALUE="ids=pictobrowser& names=pictobrowser& userName=www.giteinbrittany.com& userId=53897043@N00& titles=on& source=keyword">
<param name=scale value=noscale>
<param name=bgcolor value="#ffffff">
<span>Unfortunately we are unable to display our Brittany photo gallery in your browser as you do not appear to have the free Adobe Flash player installed.<br><br>Visit the <a href="http://www.adobe.com/go/getflashplayer" onclick="target='_blank';">Adobe Flash download centre</a> to get the latest version.</span>
</object>
And then I surrounded this all within a <blockquoute><div> to indent pictobrowser a little instead of worrying about including an align=middle which isn't valid HTML.
The <span> in the middle is a bit of HTML that's displayed if the browser can't display the Flash movie - prompting the visitor to download the Flash player from the Adobe site.
This new website page passes OK through the W3C validator, it displays properly in all the browsers I've tried, job done methinks!
Update 27/7/08: Found out that an AdBlock bug when used with Firefox 3 causes Flash files not to load in Firefox 3. Until Adblock is corrected I'm not going to implement this change
Labels: Website
posted by Geoffrey at 9:44 pm Permalink
1 Comments:
hi,
i like you have been trying to find a way to make pictobrowser IE compliant and was overjoyed when i found your post that detailed your tweaks to the code.
however when i tested http://giteinbrittany.blogspot.com/ using http://www.browsershots.org it doesn't appear pictobrowser is displaying properly? am i missing something?
thanks in advance...
By
josh909, at August 28, 2008
Post a Comment
<< Home