DuoMesh Project Blog

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

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:

Over the last month I have been brainstorming and researching into various different technologies.

My main list chosen technologies include:

Coding and Mark-up Languages

• HTML/CSS
• JavaScript/AJAX
• WML
• XML/RSS

Web Server Software

• Apache
• PHP
• MySQL

Design Packages/Other technologies

• Photoshop
• Blogging Software
• Questionnaire Software

Coding

• Dreamweaver
• Notepad++
• ConTEXT
• BBEdit
• SmartFTP

End use hardware and software

• Browsers
• Microsoft Internet Explorer
• Mozilla Firefox
• Safari
• Opera
• Camino
• Mobile Devices
• Mobile Phones
• PDAs
• Tablet PCs
• Other hand held devices (like the Sony PSP)

Most new mobile phones will have access to the Internet over GPRS or WAP protocols and as such my project will be aimed more towards newer phones (e.g. phone which were produced in 2003-2004 onwards)

More information on my technology choice and justifications can be found in my full dissertation.