DuoMesh Project Blog

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

After a few months thinking of possible website names I have settled on the name DuoMesh.

Duo meaning that the site will work on the web and on mobile devices.

Mesh meaning that the content is synchronised between the web, mobile devices and RSS content.

I have purchased DuoMesh.com and setup hosting for my new website with UKHost4U.
There were many news related and non-news related names which I had thought of, but the main reason for this name was:

• Its easy to remember
• Its sharp and to the point
• It suggests that it can be used on two types of devices or can access a range of information from it
• The domain name was available
• The name has meaning to it, and isn't just some catchy sounding name

One of the features that I wanted to provide was access to websites that do not provide RSS feeds. So today I have been experimenting by making a custom demo/module that will take any website and read in the HTML into a string, then only pull out the content which the user is interested in.

To do this there were several steps that the system needs to do:

1. Pull the content (HTML code) from a website into a string or buffer
2. The user must identify two things on the website that doesn't normally change (e.g. text like Home or News, or a HTML tag like the start/end of a table etc.)
3. The system will then search for the first occurrence of that text/HTML and then remove anything before it
4. Then it will look for the last part which doesn't normally change and will delete everything after that
5. The next step was to remove all the HTML tags (except for hyperlinks or line breaks <br>) so that only the text is left

After a few hours of coding I managed to get it working by using various commands such as strpos, substr and strripos the only problem I encountered was that relative hyperlinks were pointing to a file that should exist on their website, but it was actually pointing to my own test server (my Mini Mac) which gave a 404 File not found message.After a bit of hunting online I found a command that converted a relative link into a absolute link from a coding discussion forum which provided very useful. An example can be seen in the following screenshot:

View Full Size