A knowledge of how to produce Web pages using HTML;

An awareness of good HTML5 & CSS in terms of authoring professional pages.

An ability to expand upon basic IT skills and so enhance career

development plans and prospects.

An awareness of general trends in the development of IT with specific relation to the World Wide Web.

An awareness of the further facilities available for more advanced Web presentation.

Objectives

At the end week 6 of the course, you should be able to:

Demonstrate elementary competence in composing Web pages using HTML5 and CSS;

Design and plan a sequence of related Web pages;

Prepare suitable graphics for incorporation in a Web page;

Upload files to a web server to make your website live;

Understand some of the skills involved in good design for Web pages.

So far, we have learned

Understand the basics of HTML5;

Create a basic web page using a simple editor (Notepad ++);

Adding formatting to the text on a web page;

Understand how to link to other webpage using hypertext tags;

Understand how to use relative links to organise your web pages;

Know how to edit and make corrections to your HTML documents;

Add images to your web pages;

Upload the pages to the live web site and view;

Good layout for web pages;

Lists and tables for better layout and presentation of information;

Use of Cascading Style Sheets (CSS) to impose standard formatting on a web site; How to vary the standard style;

Design steps

Follow 4 steps for website design process:

Step 1: Plan

Step 2: Design

Step 3: Develop

Step 4: validate

Step 5: Audit your website, knowledge transfer and release

A basic web site

A basic web site will consist of:

a) An index.html page plus at least two more pages.

b) The index.html and your other pages should be linked

c) One page should contain a link to an external web site

d) Your site pages should contain examples of: an image, a table, a list

e) A CSS StyleSheet file which you have edited

f) Your pages should be uploaded to the live site where your tutor can view them.

If there are any problems in completing the last item (upload) email your web page files to your tutor.

Collect all possible information (requirements) regarding your website

Analysis the information (requirements)

defining goal(s) and objectives in order to achieve your goal (s).

Plan how your web pages are to be laid out and how that person on the other side of the world looking at your pages is to find specific information.

Make sure the text is easy to read and do not use too many images on one page as this can severely slow downloading.

A bulky amount of material can be broken down into several separate, linked, web pages.

Useful links:

http://www.webstyleguide.com/wsg3/index.html; http://usableweb.com/

http://webdesign.about.com/od/webdesign/Web_Design.htm

What is requirement?

Requirements define the expected services of the system (service statements) and constraints that the system must obey (constraint statements). It is a condition or capability to which the system must conform.

Service statements are also called functional requirements which include the necessary business functions and the required data structure etc.

Functional requirements are which the system has to have them.

Constraint statements are also called non-functional requirements or supplementary requirements. It can be grouped into different categories of restriction imposed on the system such as supportability, reliability, security or usability etc.

Need to know what this project about and how IT (Information Technology) can help?

Where does a project come from?

A project is initiated to meet a business needs, whether it results from competition, cut costs or expansion etc.

For example:

Competition: need to develop a website to reach more customers

Cut costs: develop a online check-in system for hotel to cut hiring staff costs.

Expansion: A exist fashion company is going to set up a new range of the fashion product on line and needs IT to help their business

How to gather right requirements from stakeholders/end users?

Marketing survey (online or paper base)

Interview

Brainstorm

Focus group

Ethnography is an observational technique which is useful in identifying essential cooperation in work processes.

Requirements Management Is Not always Easy to Manage Because…

Requirements:

Are not always clear.

Come from many stakeholders.

May not always be easy to express clearly in words.

Relate to one another and to other deliverables of the software development process. It can be very complicated such as system of system

Requirements may keep Changing in order to meet the business needs.

Are difficult to control in large numbers.

How to structure of a Web Site

When you plan your web pages, you should first list all the information (as headings) you wish to put on them.

Bring all the headings that belong together into related groups: each group will require a separate page, or group of related pages, which will be individual parts of your web site.

If there are to be a lot of web pages, it is advisable to have each group of pages kept in a separate folder.

Remember that any individual pages, which contain a lot of data, should be broken down into smaller pages, linked together. This break down should be logical so as not to interrupt the flow of reading.

Useful link for design tip:

Web Design Tips

It’s impossible to make webpages that will look the same in all browsers;

which browser versions you support

aware your webpages look different than on different web browsers, in this case, we use Firefox web browser to test your webpages

aware of webpage font restrictions or recommendations and web page download considerations

Specify which Resolution / Screen Size the Webpages should be designed to

Specify a fixed width or fluid layout

Useful link:

http://webstyleguide.com/wsg2/interface/user-centered.html

Always consider that you will not want to put everything you wish to add to your site onto one web page.

People who access your web site do not want to scroll through lots of text – and if you have images as well, then it will take a long time to download which will affect your webpages’ performance. You need to organise the information on your website, spreading it over several pages that are organised and linked via an initial “home/index page”.

Content should be supplied by the client in a form easily used

Who is supplying the text?

Who is supplying the images?

Get the client to supply all text, photographs and content in electronic format

Make sure text supplied, if formatted, is in a web-ready format

The client should supply an example site-plan, in a bulleted list

The client needs to specify any specific functionality required at the outset

Presentation v.s. Content

mainly concerned with how to use HTML to design and format your web pages.

The purpose is when you have information you wish to reach a lot of people. This content is vital and must be well written, brief and clear. You must get your message across. So the first thing you must always do is work out what your content will be and how to structure it to make it easy for the user to find the particular information they require. After this, you consider presentation – design – and this must always be done carefully so that it enhances access to content and does not obscure it.

Useful links:

http://www.webpagesthatsuck.com/

http://www.w3.org/TR/WCAG10/

http://www.e2solutions.net/articles/content-vs-designing.html

A Winning Website Is never ‘Finished’!

The client should keep his site up-to-date with news if he has a Content management system(CMS)

A website is subject to Laws of The Land and the client should investigate this Website Accessibility Recommendations

Functional requirement tests:

Test for – all the hyperlinks in your web pages, tables and images used for displaying information, such as:

Check all the links:

Test all your external hyperlinks from all the pages to specific domain under test.

Test all your internal hyperlinks if it works.

Test links jumping on the same pages.

Test to check if there are any pages without a hyperlink.

Finally hyperlinks checking includes, check for broken hyperlinks in all above-mentioned hyperlinks.

Non-functional requirement tests:

Usability testing:

Compatibility testing

Performance testing

Non-functional requirement tests:

Usability testing:

Test for navigation:

Navigation means how an user surfs the web pages, different controls like buttons, boxes or how the user uses the links on the pages to surf different pages.

Usability testing includes the following:

Website should be easy to use.

Instructions provided should be very clear.

Check if the instructions provided are perfect to satisfy its purpose.

Main menu should be provided on each page.

It should be consistent enough.

Content should be logical and easy to understand. Check for spelling errors. Usage of dark colours annoys the users and should not be used in the site theme. You can follow some standard colours that are used for web page and content building.

Non-functional requirement tests:

Usability testing:

Content should be logical and easy to understand. Check for spelling errors. Usage of dark colours annoys the users such as any annoying colours, fonts, frames and should not be used in the site theme. You can follow some standard colours that are used for web page and content building.

Useful link: http://www.w3schools.com/colors/colors_names.asp

Other user information for user help:

Like sitemap or useful links etc. Sitemap should be present with all the links in websites with proper tree view of navigation. Check for all links on the sitemap.

Non-functional requirement tests:

Compatibility testing

compatibility test to be executed:

Browser compatibility: Test web application on different browsers like Internet explorer (IE), google chrome, Firefox, Safari, Opera browsers with different versions.

Operating system compatibility: Some functionality in your web application is that it may not be compatible with all operating systems. All new technologies used in web development like graphic designs may not be available in all Operating Systems. So test your web application on different operating systems like Windows, Unix, MAC, Linux and Android and OS.

Mobile browsing: Test your web pages on mobile browsers.

Non-functional requirement tests:

Performance testing

Test application performance on different internet connection speed.

Webpages upload testing:

Test if many users are accessing or requesting the same page.

Can your system sustain in peak-load time?

Website should handle many simultaneous user requests, heavy load on specific pages etc.

Validation your HTML and CSS

Mainly validate the site for HTML syntax errors.

For CSS:

https://jigsaw.w3.org/css-validator

http://www.css-validator.org/

For html:

https://validator.w3.org

Audit your website

1.Duplicate Page Titles –

Every Page on your site should have a unique page title and a unique meta description. Avoid having a large numbers of pages with little content on each page.

2. Duplicate Meta Descriptions – Every Page on your site should have a unique meta description –it is best to add meta description yourself. Don’t auto-generate it unless you are sure you know what you are doing.

Tip, if you can’t be bothered putting a meta description in yourself, leave it out. Don’t auto-generate stuff like this, unless you know what you are doing to make each meta-description unique. Meta descriptions are for humans, not Google, IMO.

3.Duplicate Content – Duplicate content is problematic – ensure every page is necessary and only primary content is crawled (that is, not the PDF or text only version of a page)

4.Building A Navigation System Google Cant Follow

Should do: Make sure Google can read your navigation system and so your content

Should not do: lash websites for instance can cause big problems in Google, even today.

5.Building A Site Structure That Does Not Emphasise Important Content – Create a site structure for your website eg Home/ Categories/ Subcategory / Products Google can spider – Don’t make a linear navigation route to content that means you have to click 6 times to get to a product page

6.Sloppy Interlinking causing canonical issues – Google can screw up your website if you are giving it canonical woes and even have went as far to support a canonical tag to help

7.Building a site with a lot of fancy CSS, the result being a lot of what Google will determine ‘Hidden Content’ and actually penalise un-trusted sites

Colours

There are only a small number of “named” colours: if you wish to select from a wider range, use hexadecimal colour codes. #E6E6FA

You could have different colours for different pages, as a sort of “colour coding”; but this is really only suitable for large sites with lots of different topics.

Fonts

Text Fonts

Setting background colour in the body tag lets you produce some nice effects, but there is a limitation. Whatever you set here applies to the whole of the page. Also, you will have noticed that the page always displays the same type of font.

http://www.angelfire.com/al4/rcollins/style/fonts.html

Font sizes can be absolute or relative; that is you may specify a specific size or a size relative to the default font size: e.g. font-size: 12px (in pixels) or font-size: 12pt (in points). Relative font sizes are set using attributes such as smaller, bigger. See this web page for the syntax:

http://webdesign.about.com/od/styleproperties/p/blspfontsize.htm

Useful Link

Fonts