DuoMesh Project Blog

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.

Today I had my interim presentation, explaining my ideas, technology used and my aims and objectives. My presentation was with Leon Cruickshank and Angelina Karpovich who seemed positive towards my ideas.

I think the presentation went well, though it went a lot quicker than I though it would and I didn’t get to show a demo of the website working on my mobile phone, but I think they got the idea. Most of their questions were about the functionality of the site and they were interested in the way that content/feeds are tagged and if the website will actually work on a Playstation 3 or the Xbox 360.

The Playstation uses a version of the NetFront browser which is also used in the Sony PSP. [Source: Wikipedia - 14 December 2006]
As I have a PSP which I have been testing my development on and this so far has been rendering my website correctly.

Currently the Xbox 360 does not have a built in internet browser [Source: Joystiq.com - 12 December 2006] though this maybe provided in a software update.

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]

To match with the new template/design I have created on the home page, I have now updated the DuoMesh Project Blog to incorporate the mesh look!

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.

Continuing from my first design, I am still using the mesh look. But I have changed it so that that its now white text on a dark background. I have also made use of rounded corners on all the main boxes to make the design more pleasing to the eye. So far I have received positive feedback for this design, so I think I will be using this design and possibly gradually improving/tweaking it as I go along. This mock up was made in Photoshop and I will be building it in CSS and div layers rather than tables as it makes it more accessible to other devices, just by changing the stylesheet.

View full Size

Now that I have chosen project title DuoMesh, wanted to design my logo and site template around a mesh look. Selecting the right font and typographic style is important to set right mood/feel for the site.

After researching for various fonts online I came across a site called better fonts which has a wide verity of fonts (over 10,000 free fonts) my main choice for a font is that it needed to be a Sans-serif font as personally I think it looks simpler, cleaner and easier to read. My final choice of font was called Microsoft JhengHei which is actually a heiti font for Chinese characters, but when English characters are input it outputs a clean and pleasing font.

After various attempts of creating a suitable logo I choose logo 24 from my logo designs.
24:

This logo incorporates a drop reflection which has been skewed to the right and also uses the background A5.

As my first attempt on website background wasn't that successfully, so I have created a set of backgrounds to choose from. Most of the designs are made up of a hand drawn 10x10 pixel repeating image. So far I think I am happy with A5 or B7.

I may give user the option to select which theme they wish to use for there custom page or even make their own. So choose for yourself.

Keeping with the site name I chose to design the site template around the idea of a mesh.
My main ideas for DuoMesh's design include:

• It should be clean and easy to use
• Navigation should be clear and users should be able to identify where they are on the site
• The sites design should be relative to the branding (e.g. could be mesh like)
• Content should be accessible and customisable
• The website site should render/be displayed correctly in the following browsers:
• Internet Explorer 5, 6 and 7
• Firefox 1 and 2
• Opera 9
• Safari 2
• Netscape and Camino should work as they now rely on other browsers rendering engines (Firefox and Internet Explorer)
• The design should be attractive to the user
• The site's content should be able to draw the user in and encourage them to repeat visit the website

My initial design idea was to use black text on a white background. Using a mesh as the background proved to be a bit of a problem as the grey background didn't make the website stand out at all and it didn't look very professional. I will be working to improve this design before I make it final:

View full Size