DuoMesh Project Blog

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.

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

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

Today I have been looking into ways of processing and outputting RSS feeds. The best way of processing feeds is with a free PHP extension called Magpie RSS this will then allow you to call the function/program from within your own script and it will allow you to access all the various metadata within the RSS/XML feed.

The benefit of using Magpie RSS is that it will automatically cache the RSS feeds and will only update the feed when it there are updates. This greatly improves the overall speed of loading up a page with allot of RSS feeds on it, as the system will only need to request the feed online once and all subsequent requests for that feed will use a cached version stored in its cache folder
For example to load the BBC News RSS feed, the following command can be used:

This will then make a request and then cache that request. Each news item can be accessed by calling its specific tag, so to pull out the title of the article I can use $item['title'] and the same can be done to get a short description of that article $item['description']. So to display the complete feed the follow command can be used:

Today I managed to install PHP 5.1.6 and MySQL 4.1.21 on my Mac mini, it required a bit of tweaking to get PHP to talk to MySQL and so that it automatically starts up the servers when the machine loads up. But other than that it seems to be working fine.

Yesterday I had my 3rd meeting with my project tutor Paul Kyberd we discussed all my project ideas and features.

I had quite a few ideas about how the site will function and what users will be able to use the site for. After going though a few of the ideas, he suggested that it may be too complex to code within the project time frame and to take the core ideas and make some of the other features optional rather than required (descope).

So I have decided to draw up a brainstorm to isolate and identify the core features and optional features.

He also suggested looking for mobile phone emulator which can be used for testing purposes, after some research there only seems to be a few mobile simulators an online version at: dotMobi, Palm OS (which requires that you actually have the phone so that you download the ROM from it), there's also one for Windows Smartphones (or Windows Mobile) called Microsoft Mobile Explorer Emulator which doesn't seem to be supported by Microsoft anymore (I am guessing that they have integrated it as part of Microsoft Visual Studio)

I will be using a combination of the dotMobi emulator and I will be using my own mobile phone which is an O2 XDA IQ running Windows Mobile 5.0 this can access the internet free of charge by using my laptops Bluetooth connection. I will also be using my Sony PSP to test that my website works on it, I will also use my old Dell PDA which uses an older version of Windows Mobile (2003).

Chumby is an open source device which is primarily a radio alarm clock, but also serves as a wireless internet access device which could be customised to allow users to view their custom content from my project on their alarm clock.

This information could be live updating every 30 minutes or at a customisable interval. As its always online users are able to see all there important or favourite websites at a glance any time, day or night.

Other site features could include a cut down version of their customised page as a small box that could be placed on the users own website or on their social networking site (such as MySpace)

Also I could provide dynamic RSS feeds for each users custom page by merging all their content into one feed to allow users to view their favourite content from another RSS aggregator.

Here's a list of all the features I hope to include in my project:

• Content rich RSS/XML content reader module, which could interpret:
  • Latest news
  • Weather
  • Travel Information
  • Stocks
  • Blogs
  • Photo Blogs
  • Reviews and Magazine Articles
  • Podcasts
  • Vidcasts
• Access to content via a mobile device
• Self user registration and profile management
• Access to non-RSS information such as stripping out the only the text
• Friends system to allow users to see their friends interests
• Feed discovery system where users can add feeds and allow others to find them
• To be able to see how many people are subscribed to a particular feed and see other users with familiar interests
• Allow users to tag/categories each feed for themselves and to be able to view a real time tag cloud of the most popular categories
• Special modules/items that can contain other dynamic content such as:
  • Email
  • Clock
  • Calendar
  • Games
  • Other useful gadgets (such as unit conversions, timers/count down scipts)

I will be adding more features to this list throughout the year