A10 - iMe - Web Plan

Goals
To use some PHP 5 features that would benefit the client
To create the site using XHTML 1.0 Strict and CSS 2.1
To make sure that the site validates to XHTML 1.0 Strict and CSS 2.1
To use MySQL

Target Audience
James is a 15 year old school boy at Freeston High School. He regularly visits the shop to purchase a school special. He owns a PC with a 1.1MB broadband connection, and uses internet explorer 7. His monitor setting size is at 800px x 600px. He also uses Windows XP. He has average computer skills and wants to be a teacher when he grows up. He would use the site to keep an eye on the prices as he only gets so much money for food. Janis’ also do a mixture of desserts such as: flapjacks, cookies, tarts, etc. which he also likes to keep an eye on just incase something new comes out.

Molly is a 32 year old driving instructor. She often visits Janis’ shop as she doesn’t get much time for food. It will be her wedding in several week and she requires food to be made for the party. She would use the website to get in contact with Janis and look at the online menu to see what can be made. Molly uses a fairly new PC with 2 MB broadband connection and uses Internet Explorer 7. She has very low experience with the internet. She has resolution setting size of 1024px x 768px and uses Windows XP home edition.

John is a 58 year old web developer. He owns Heron Design in Normanton, and regularly visits Janis’ for his dinner. He would use the site before he visits the shop so he can take his staffs orders as well. He can use the menu list to make sure he has everyones orders. He has advanced computer skills and uses Firefox 2 to view the site. He also owns several computers at home eachh connected via a network and with 8MB broadband. He has resolution setting size set to 1024px x 768px. He uses a Mac OSX.

Delivery Requirements
PHP - PHP will be needed to create the Email feedback form. It will also be needed to create the online logbook/diary. The feedback form will be created so that viewers can get in contact with the client (Janis’). They will need to do this to arrange for private hire, or to simply give feedback on her food and store.

MySQL - MySQL will be needed in conjunction with PHP to create the login system and the diary/logbook. XHTML 1.0 Strict - I will be creating the website using this language. The code will also be validated to 1.0 strict and will contain other data such as PHP and CSS within it. Validating the site will make sure that it stays future proof and accessible. Employers are also looking for people that are capable of creating accessible sites. I feel that this practice will further increase my skills in doing this.

CSS 2.1 - The layout will be created using CSS. CSS will also be used for the creation of links and fonts. It will validate to 2.1 to make sure that it stays future proof and accessible.
Dreamweaver - I will be using Dreamweaver to type my code. I will also be using it to link my stylesheets and to preview my design in different browsers.

FTP - I will be using the Dreamweaver FTP to allow me to upload the website onto the internet. I am also more familiar with the Dreamweaver FTP.

Competitive Analysis
www.caferouge.co.uk
The site on first glance looks like it has had a lot of care and time spent upon it. The site looks professionally made. The flash animation is inviting, although seeing the bubbles over and over again may be annoying or distracting. The roll over links are also good for new internet users, as they allow the viewer to realize that they are links. It allows alt tags over the links, which can tell the user what can be found on that particular page. One thing that suprised me was the fact that the site fully validates to XHTML 1.0 strict. I expected with the roll over buttons and the flash that it would be possible. The company that created this site must believe in fully accessible sites. The style is quite unique and suitable for the type of company. Some of the font sizes are a little too small.

Features
The site includes a search for your nearest Cafe Rouge, which brings its results up and also the distance to it. The results also give a full address and phone number. You can also click on the selected cafe to view an image and more information about that one. There is also a print button that allows the viewer to easily print off the information they require. The search is a good feature and will increase the popularity of the site as viewers don’t have to look through the site to find this information. It is on the home page so it’s easily found.

The roll over buttons allow the viewers to easily notice that they are links. It also states which page you are currently visiting. This is good for users that are new to the internet. They can easily differentiate between these navigation links and the body text.

The flash videos can be annoying or repetitive, especially for return viewers. It does have a nice theme and is certainly welcoming, but very distracting. The video gives the feeling that your area is private. It also gives the impression that its a romantic place. I think they have tried to give this impression because it is close to valentines day.

The flash chalk I feel isn’t needed at all. It also only appears on the home page. This might confuse viewers as the chalk appears on every page but you can only use it on the home page.

Improvements
There is a bug which concurs when you highlight a link and then move off the link onto the flash animation. The alt tag still appears and the link still shows as it is being pointed over. This could just be a consequence for having flash applications running on the computer.
There are some consistency issues with the links. Some links are roll overs, some links are underlined and some links just look like body text. There needs to be a clear difference between links and body text. I would get rid of the underlined links and the body text links and give them the same style so they are easily noticed.

The contrast between the reds isn’t very high. They need to be more different. The font inside the search box needs to be enlarged. I found it difficult to read until I zoomed in.
The links at the top of the page aren’t noticed at first glance. They need to be placed in a better location.

There is a black spot which is blocking some of the text on the white area of the home page. this makes it hard for the viewer to read. The spot should be removed or placed elsewhere. A blue and yellow spot also appears on the main navigation link. This needs to be removed as their is no reason with it should appear.

Overall I would give it an 8/10

www.therivercafe.co.uk
The first put off for this site was the immediate flash page. It looks unprofessional, and makes viewers want to click back straight away. They might also need to install the flash plug-in, which they may not want to do. It also has a slow loading time, which may also turn off some viewers. The logo looks cheap and too obvious. It needs a redesign. The quality of the site images are good and the site has a clean view and a consistent alignment. One thing that I do enjoy is the colour scheme of the fonts change for every page. Not exactly consistant, but the style is consistant. I think it works well on this site.

I think the site needs a new logo, as the one created looks like it’s been created by a child. The rotating images on one of the pages is rotating too fast and can be distracting.

Features
One of the benifits of this site is the menu system on the links. It is an easy way to arrive at what you need without having to click through masses of links. The menu also appears at the bottom of the site rather than the top. This is good as it will stop the menu overlapping the text, but can be bad as users may have to scroll to find the navigation. It may put viewers off and could make them leave.

The search on the wines menu is quite good as it allows viewers to see what stock of wines are available. The results also tell you which places store the wine, how old the wine is and how much it costs.

The map of italy is also good as it requires users to interact with it. I did notice that one of the areas didn’t work however. There is also a map that tells you how to get to the place on foot, by train and by bus.

Improvements
The flash introduction needs to be removed. It will more likely make viewers click back as soon as they see it loading. The good thing is that it only lasts a few seconds, which some users may be willing to wait.

The logo could also be redesigned. I think it is too childish and basic for a logo. There also needs to be more information on the home page like a welcome note or something. Links could do with a roll over feature to allow viewers to clearly see that they are hyperlinks. The flash image rotations need to be slowed down, or created into a slide show version, as the current method is very distracting.

The logo could be inserted onto each page and can act as a link back to the home page.

I give this site 7/10

www.cafedeli.net
This site also uses flash in a good way. The site is also structuraly unique by the way that only the selected item changes and not the whole site. I think this is quite clever as loading times are really short and theres no navigation through masses of pages. The black background colour is off putting, and the navigation could be better. The alignment of the site is quite good, although there are some errors in Firefox where the text stretches out too far and onto the black background. The main background colour is grey, which also gives the site a very dark and dreary feel. I also think that the text scrolls too much over the page, thus making it harder to read. The ideal amount of characters should be between 45 - 65 and this site has well over 80 characters.

I was surprised to find that this site doesn’t validate at all. I would have thought that a professionally created website would have validated to atleast transitional.

Features
The site is quite limited. The main feature is the flash banner, which gives a nice smoothe feeling and welcomes the viewers. The second feature is that the site has absolutely no loading time at all.

Improvements
The first improvement would be to validate the site to 1.0 Strict. This should keep the site future proof.

The colour scheme really needs to be something more than just black and grey. I admit that black can liven up sites but I think it is over used in this example. I would use the grey as the main background and have a white background behind it. The navigation could also be aligned better, as it looks uneven with the different amount of links under each header.

The alignment of the title text when an item is selected could be improved by either shrinking the text size or making the coloured bar longer. This will stop any text from running onto the background colour in Firefox.

The black and white contrast makes the text really hard to read. I think that making the text slightly larger and by removing the black background in exchange for a more subtle colour should solve this.

I give this site a 6/10

Progress so far

The assignment so far has been successful not only in progress but in my time management as well. I seem to be keeping up with the work which is unusual for me. I think this is due to my planning and preparation during the first week. I made sure I had an in-depth list of things to do. I also made sure that I had a master plan, and all time sheets were created digitally with all notes written as I progressed.

The plans for over the half term holiday didn't go as planned, although I have caught up dramatically. You can see by looking at my time plan that I had not expected to do any work over the holiday but ended up doing quite a lot. I underestimated what had needed to be done by the time I went back to college. I think the reason behind this was forgetting how far I was through the assignment already.

Next time I would motivate myself more to get more work completed before the holiday started then at least I could have some spare time.

The meeting with my client didn't happen when I had planned it to because my mobile broke so I had no means of contact with the client. I should have prepared to meet the client sooner rather than later.

What is it?

PHP
I currently know nothing about or have ever used the .php language. It is for my benefit that I find out the basic understanding of what .php actually is, and what it can do. I used reference sites, books and blogs to find out some background information on this language. I will learn as much as I can about the language before I actually start to use it, and document it.

.php stands for Hypertext Pre-processor, and was created by Rasmus Lerdorf. Its original name was Personal Home Page script. .php is a server-side scripting language with a similar syntax to C and is used for creating dynamic content on websites. .php is also an open source language, which means the original code can be edited by anyone without copyright or ownership issues. Some sites do charge for using their complete code. It also supports MySQL language and the Apache program. There are hundreds of .php forums so any questions that require answering can be found quickly. For these reasons, it has become one of the most popular open source languages.

It was originally created as a set of macros to help coders manage their site. Its name grew a lot more from its purpose. The language was extended, and new features were added. It is now capable of managing a huge database driven website.

In an HTML page, PHP code is enclosed within special PHP tags. When a visitor opens the page, the server processes the PHP code and then sends the output (not the PHP code itself) to the visitor's browser. It means that, unlike JavaScript, you don't have to worry that someone can steal your PHP script.

.php runs in conjunction with HTML files. The .php code is used within special .php tag. The server processes the .php code and sends an output to the visitor’s browser. If .php is used within a HTML file then the extension must be changed from .html to .php.

.php versions up to date are 5.2.5, which was released on the 8^th of November 2007, and 4.4.8. The version 4 has now been discontinued (http://es.php.net/downloads.php#v4), and the last version has been released. The version of .php you will be using needs to be defined on your hosting server.

Benefits
Page loading times increase due to less processor intensive work. The strain on the server is also lower. This is because the code is optimised, which means the server has to do less work. This will also increase loading times.

Free to obtain, as it is an open source language.

The community offers technical support and continuously updates the code further expanding .php’s capabilities.

Data is stored on the server, which means the site can load and save forms and details much faster. Data is also stored for if the viewer returns. .php allows the website to become more dynamic. This means that the site will react to the viewer. Things like the viewers preferences can be saved and then called back for when they return.

No need for plug-in software to make the site work properly, unlike Flash. Everything is run from the server so nothing from the users end is required.

The language is recognised and will work on all of the latest platforms. The syntax is also relatively simple, meaning it’s easy to migrate from one programming language to this one.

Disadvantages
The language can be quite hard to learn to new language programmers, although if you already know several languages and their syntax then it’s pretty easy to pick up on.

Error finding is tricky. One little mistake can mess up the whole site. I think this counts for most programming languages. They need to be correctly typed with notes. The code can make your document untidy, especially if adding multiple languages into the same web page.

What can it do?
Create login forms – Login forms allow access to restricted pages for authorised members only. This feature is useful and is used widely across the web, mainly for pay sites and downloads.

Create eCommerce sites – Sites such as online shops where card transactions take place.

Create feedback forms – Feedback forms allow the viewer to give constructive feedback for the site they are viewing.

Create email forms – The forms created can be sent straight to the clients email address. This will allow them access to all the feedback they have received from the viewers simply by logging into their email account.

Attach to databases – Databases allow the storage of personal viewer details and preferences. This means that returning customers can have their details saved and then taken place next when they log in.

Create Content Management Systems (CMS) – CMS allows the end user easier content changes for their site. It’s good for users that don’t know a lot about programming by hand. Things such as Blogs are done this way.

Insert and manipulate dates and times – Inserting the date and time onto a website is beneficial for the viewer as it will tell the user the time and date. They can compare this with article dates to say whether the article is old or new.

Create hit counters – Hit counters show the amount of people that have visited your site from the start. The counter can be reset easily.

Header and footer inclusions – Create and edit your site headers and footers.

Create rate bars – Rate bars allow the site/content to be voted on. The results are shown in a rate bar which will show how good/bad the item is.

URL Manipulation – Add cloaks to the URL to make it look neater. Good for users with extremely large URL names.

Create text input fields – Text input fields are used on forms to gather information that could potentially be used and saved on a database. The forms can be given specific targets to meet i.e. date must be specified in the dd/mm/yyyy format, please try again.

Create shopping baskets – Shopping baskets allow viewers to buy a list of things, rather than one item.

Website statistics – This allows the end user to view many different stats about their website. It allows them to see how many visitors they receive per day or how many they have had totally, and various other features.

Create forums – Create topics for chats and discussions to take place.

Create rotations for images – Images that change for every visit to the page. I.e. the header will change from A to B for every visit by the same user, or the header for each page on that particular website will be different. Many companies use this when advertising pop-ups.

Create images and graphs – Display graphics and charts easily

Create calendars and address books – Create calendars to plan your week or store birthdays. The Address book allows details to be saved.

Create votes and surveys – These can be used to gather answers quickly. The vote results will be shown in a table. Online surveys are similar to appear based surveys, and the final results will usually be sent to the creator through an email.

Set file permissions – This allows the end user to block certain content that they do not wish viewers to see.