DuoMesh Project Blog

A few users reported that not all Podcasts feeds were not compatible with DuoMesh. As mentioned in my previous post about Podcast feeds.

There were issues where feeds listed as Podcasts didn’t actually link to an audio or video file, which caused problems with the Mini Player, instead they linked to a web page. This caused me to recheck the Podcast function to make sure that it actually finds an embedded audio or video file.

Other problems where that if the Podcast didn’t have an icon or description it would break the whole websites layout, as there were open or unclosed div layers which caused the page to render incorrectly. Also users found that they were able to change their passwords without having to enter their current password, this posed a security risk as if a user were to select the “always remember me” option while logging in, another user using the same computer could change their password.

Allowing users to add different weather information to their profiles was one of the feature I suggested early on in the project.

This has now been implemented using Yahoo! Weather’s API service and PHP Class “weather” by Matt Brown. This allows developers to access Yahoo! Weather services and pull information back into their own applications and easily customise the layout and design.

The only problems encountered with the implementation where the transparent weather icons in PNG format didn’t render properly in Microsoft Internet Explorer 6 (the problem didn’t effect IE7 as Microsoft new version of IE has partial support for PNGs) as shown in the image below.

This was fixed by using a CSS hack, this involved putting each of the transparent PNG icons into a div and setting the icon as a background image for that div layer. Then using a special filter command to trick IE6 to render the images correctly.

After getting standard text based feeds functional, the next steps was to get other feeds types supported. As feeds are generated/written in XML this means that the tags used in the markup language are not restricted liked HTML and users can create their own tags such as:

This could have been used to detect/or describe which kind of feed the user was adding/viewing (e.g. text based, podcast, image feeds). But due to the nature of XML there is no standardised way of describing if the feed they have added, is entirely image based or contains some kind of video/audio information.

This means that I will have to let the user choose what type of feed they are trying to add.

When developing the Podcast module I encountered a wide verity of problems, as the XML based feed for a Podcast is not widely standardised. Apple has made an attempt at trying to solve this problem, as their media player "iTunes" supports Podcasts, but will only accept XML that has been written to conform to their technical specifications. After adding wide verity of feeds I found that some podcasts didn't include the <description> which caused the layout of the site to break. Also some Podcasts would link the user to a web page instead of linking them directly to the MP3 audio file or video file. These things all had to be taken into account while debugging the code.

One of the major problems with designing a website is cross platform and cross browser support. I have been designing my website to meet W3C standards by using a mixture of HTML, XHTML, and CSS. Most modern browsers created within the last 2 years (e.g. Firefox, Opera, and Safari) support most of the standards set by the W3C.

I have aimed my website for use on browsers made within the last 3 years (for example Microsoft Internet Explorer 6/7, Mozilla Firefox 1/2, Opera 8/9 and Safari 1) and all current mobile phones/portable PDAs created within the last 2/3 years using XHTML and WAP (for mobile devices). Some browsers, however fail to render certain parts of the website correctly. Currently there is a issue with IE6 rendering an extra bottom border for image/Podcast module boxes.

These issues are usually fixed by using browser hacks, this works by using newer CSS standards that are not supported in older browsers. For example in CSS this is a perfectly legitimate CSS statement:

This is understood in pretty much every modern browser except IE6, which doesn't understand the element>child selection (e.g. html>body), so IE6 will ignore this CSS setting and default to whatever was set previously (e.g. just the #rss-container setting). Most of these problems are corrected by trial and error and extensive testing in different browser versions (by using Parallels Desktop, which allows virtual machines to be setup and used at the same time on my Mac Mini).

One of the major problems with the site at the moment is the loading times. When a user visits the site and they are the only user to view it within 30 minutes, some of the feeds may have been updated, by default Magpie RSS parser will check the last time the feed was cached (i.e. downloaded before and stored in memory on the server). If the RSS feed has a newer creation date than the last time the feed was cached the RSS extension will attempt to automatically download the feed again.

This could adversely affect the loading speeds of the website. As a user may visit the site and the RSS module will find that all the feeds have expired and will have to be updated.

I have found that sometimes the site will take upto 20 to 40 seconds to load, and in some extreme cases this times out the browser. Once the user has been to the site the feeds will have been cached and the site will load in less than a second. One way of resolving the problem would be to change the way the RSS module caches feeds, possibly by forcing the system to keep caches for up to half an hour to an hour.

Another way of increasing the speed and most likely the best way, would be to setup a cron job on the server. A cron job is like a scheduled task and can be setup to automatically load up the website say every 30 minute. This would take the loading off the user and system would deal updating the feeds.

The core feeds types that the script will support are:

• Standard text based feeds e.g. BBC News
• Image based feeds from such image galleries as Flickr
• Audio/Video based feeds such as Podcast like Diggnation (weekly technology video Podcast)

Other feed types:

• Email
• Weather
• Access to non-RSS feed information by taking a website and only stripping out the text

So far I have implemented standard text based feeds and image based feeds see: http://beta.duomesh.com for the latest development build.

OpenID is an open source login system. It allows users to use a URL such as http://sebflipper.myopenid.com as a login name, this allows users to use their OpenID username/URL to login to multiple websites without having to register for them first.

When a user encounters a website that supports OpenID they can enter their username and the website will then redirect the user to their OpenID login page, in my case it will redirect me to myopenid.com which will handle the login on behalf of the originating website. Once the user has logged in and accepted that they want to share their information on the website they were viewing, myopenid.com will send a request back to the originating website to say that the login was accepted.

At the moment only a small number of websites support OpenID such as LiveJournal and Technorati, but more websites are starting to see the potential of a single login.

A video of OpenID in action can be found on Simon Willison's Weblog [Source: Digg.com - 23 December 2006]

I have tried playing around with the demo samples provided from Videntity.org and I have managed to login and authenticate myself using their example scripts. The only problem I have encountered so far, is with trying to fetch details about the user such as their email address and name. As the only thing I can get back from their examples is weather the user is authenticated or not.

I may try and integrate it with DuoMesh, but it may require another database table or amends to the existing user table. Also there would be problems with conflicting user profile information as currently I have been unable to fetch details about the user from OpenID authentication servers.

Each Internet browser whether its a fully blown desktop browser like Firefox, Internet Explorer or a mobile phone will send out a request with each connection it makes with a User Agent tag.

This tag usually contains the name of the browser and what version is it. It can also contain what the system default language is as well as other information. This could be used to direct users to a mobile version of the site or to the normal website.

There is an open-source project called WURFL which is basically a set of XML file that contain information about capabilities and features of over 9000 wireless devices. Its possible to use this information to redirect people using a mobile device to a more appropriate version of the site.

Using the PHP modules they provide with the software you can use this command to redirect users to a mobile version of the site:

[Source: dev.mobi - 6 December 2006]

The only problem with this method is that its not guaranteed to have all and new mobile devices in its database. So not all users will be detected and redirected correctly.

I could use this method combined with option to view the full site or the mobile version.

By default all websites contain www. This is something that web users have become familiar with, but many websites are now automatically removing the www. from the URL to make their domain shorter and cleaner. According to some websites this also improves your ranking on Google.

To achieve this on an Apache web server, add the following code into a file called .htaccess

[Source: bigbold.com - 1 December 2006]

AJAX is a way of using JavaScript to process user requests made on a website. Normally when a user fills out a form or clicks a link the browser will send a request to the server and browser will read the data the server sends back effectively leaving the page they are looking at and loading another page (normally called a post or get request). With AJAX the developer can specify an area on the page such as a frame, div layer or even paragraph they wish to use to display dynamic information.With AJAX when a user clicks a link or fills out a form JavaScript will do all the work. Instead of giving the button or link a normal command like:

Is replaced with:

This will then call a JavaScript function which will take the user data and send their data to an external script though the JavaScript command "XMLHttpRequest" once the data has been sent via JavaScript its response will then be displayed the area set-up by the developer. All this is done without the user leaving or having to refresh the page.

The advantages of this are:

• It provides a more streamlined user experience
• Its usually quicker to get a response (as the AJAX handler only needs to send back the raw data without having to give any style information or only very basic HTML)
• Its a more interactive experience, allowing user to interact with it like it was a proper user interface and not just a website
• You can create rich applications in it such as Google Maps and Google Mail

The main disadvantages of AJAX are:

• It will only function in modern browsers
• It will only work if the user hasn't disabled JavaScript
• It wont work on most mobile devices
• Most of the time it will not be accessible to disabled users

I have been experimenting with AJAX on my holding page currently I have a "Keep me Posted" section allowing users to enter there email address which I will use to email users on updates to the site. This uses a form to send their email address to a PHP AJAX sub handler page which will validate the user input making sure they have entered an email address in the correct format and then save this to a database and also make sure that their email address is real by sending them an automated email asking them to click a link to activate their email address in the database.

Once the JavaScript has sent the data to the PHP sub handler the script will then respond with either a thank you message or enter a valid email address message without having to refresh/reload the page.

Its quite a nice touch, so I will be continuing to explore it potential to see how I can use it to improve my website.