Using your html as a xml data source
January 11th, 2010
Since a long time ago I’ve been wanting to write this post, it is all about a simple technique that I used in my portfolio and turned it so much more friendly to search engines.
It basically consists on turning the html itself in the content source for flash. But in order to achieve this we have to make sure that all required steps were well done. Here is a little diagram to show what it looks like.
First of all we need to use swfobject or another similar tool for flash insertion. It is essential for the final result because the javascript will replace the actual html in the page and it will allow us to actually fill the html with information and the user will only see the flash content.
Second step is make sure that your html will be xhtml strict compatible. This is essential to make sure that the flash will be able to parse it as a xml.
After having everything setup we have to start filling the html with some relevant information and the third step is to do this wiselly, making a good use of class and id attributes on your div’s. They’ll be essential when parsing the data on flash.
Once we have all html is finally time to go start creating some flash, the unique difference on your flash code will be some adjustements before xml parsing, we’ll get the xml loaded as a string and direct replace some tags to avoid problems during the parsing, in my case I’ll start by getting just the content from body, like: xmlString.split(“<body>”)[1].split(“</body>”)[0] and after that insert a cdata inside all p tags to avoid problems with a and br tags like: xmlString.split(‘<p>’).join(‘<p><![CDATA[').split("</p>").join("]]></p>”), in my case I had to keep splitting all p tags that have different ids, you might do the same or find a smart way to add all the cdata blocks to the xml.
And that’s it! Now you can even create a nice css and you will have an alternative version of your site avaiable to users without flash player (like in the iphone).
If you want you can check my online portfolio html as an example for the xhtml code organization and you may also disable javascript to see how it looks like for users that don’t have flashplayer avaiable.
Leave a Reply