Week 1 – Lesson 1

Introduction

Understand the fundamentals of cascading style sheets (CSS)

Understand the fundamentals of scripting languages

Be able to control the layout of web pages using CSS

Be able to create interactive web pages.

Specification – A list of requirements designed by the client to describe in detail what is required

URL – Uniform resource locator

CSS – Cascade Style Sheet

Tags – Part of a markup language <>

Markup language - A coding system, such as HTML and SGML, used to structure, index, and link text

Unit 28 - Website Production and Management

You should:

Understand web architecture and components

Understand the factors that influence website performance

Be able to design websites

Be able to create websites.

Learn CSS (25%)

Learn JavaScript (25%)

Practical work in the form of assignment work and in class sessions (50%)

I am the client:

“I need you to design a website for me”

You will also need to create the web-site

You will then need to test the web-site

No. 1 – End user – Can you make them come back to the site?

No. 2 – The customer – Will

they pay your bill and hire you

again (depends on No. 1 !)?

No. 3 – You. Have you done a good job? Does the site work? Does everything included add to the users experience, either visually or giving them extra functionality.

No single best way to build a web site

Need to know the specification

Target audience

What does the client want?

Who is it aimed at?

Correct use of graphics, photos and video

Ensure that the site displays correctly in all browsers

Make use of clean and concise web language

Layout

Loading speed

Code optimisation

Consistency

Templates

It is a box

It is 2 dimensional

Can have layers

Can be simple or complex

Can be static or dynamic

Can be text only or make use of colour, images, sound...

We can all add content

We can play with:

Text

Images

Sound

Video

Colour

Headings

•Lorem ipsum

•Place holders – e.g. stock images

An artistic version of the proposed site

Will give all the information required Precise layout of each page

Fonts

Sizes

Colours

Images

etc.

Can be produced by strange technology called ‘drawing’ or using software

This is a work thing…….well, activity…..part of your assignment really

Requirements………….(oh oh)

5 pages

Must conform to the XHTML 1.0 Transitional DTD (Doc type declaration) http://www.w3.org/QA/2002/04/valid-dtd-list.html

Lets choose a topic…….

1. “Locked-Down Data” Computer security.

This can be any topic on computer security such as:

forensics,

malware,

hacking,

encryption,

cryptography, etc.

2. “Junior tycoon”: a business selling ‘piggy banks’.

3. “fabrique au maroc” A small local business that sells hand-crafted items purchased in Morrocco. The business also supports the ‘Atfalouna’ charity which supportsstree-t-children in Marakesh.

2. Herefordshire Squash, Tennis & Racketball Centre. A tennis and squash club in Herefordshire, regarded as Hereford’s premier racquet-sport club.

Must make use of CSS (not just yet, but later)

inline CSS

Embedded CSS

a separate style sheet

Interaction (at least 3 separate types)

Require a storyboard

Produce a site map

Make use of graphics

More to come........(yes, I am a terrible customer!!)

A brief look at what you should know

Need a qualified URL http://www.hct.ac.uk

Is located on a web server

Can be static or dynamic

Static No interactivity

Dynamic Interactive (we are not looking at navigation here)

Make use of middleware

Multi-tier

Middleware: also called plumbing. Separate software that links two distinct applications, it is not part of either. E.g. To link a database to a webserver allows dynamic forms based on user entry. Common categories include: ESBs (Enterprise Service Bus multilanguage, multiplatform e.g. Sonic ESB, Cape Clear Server and PolarLake Jintegrator), TP monitors (transaction processing monitor – makes sure transaction occurs smoothly or takes remedial action), DCE(Distributed Computing Environment provides security and fault tolerance, services include: Remote Procedure Calls (RPC), Security Service, Directory Service, Time Service, Threads Service, Distributed File Service ) environments, RPC (remote procedure call – allows program on one computer to execute a program on another egserver) systems, Object Request Brokers (ORBs) (CORBAprogramming model allow client PC to request a service from an unknown/unspecified server), Database access systems, Message Passing.

Multi-tier – allows rewriting of only part of a web-page or application, rather than entire page/application.

Allow the user to perform some task

Can be database driven

Can make use of scripts

i.e. JavaScript

Are dynamic

i.e. They change as the user interacts with them

Web pages make use of a mark-up language

HTML Hypertext Markup Language

Specification found at http://www.w3schools.com/

Very easy

Can get complicated

Supposed to work in all browsers

HTML is a tag based language

E.g. <title>

Tags have a start and end tag

E.g. <title></title>

Which tags have no end tag?

Tags may be nested

E.g. <body><script></script></body>

Tags may have attributes

<h1 align=‘center’>

Open Notepad or Notepad++

Enter the following:

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Include the

extension

Change this to:

All Files or HTML

Save to z:drive or pen drive

Now open a browser

Locate your file and double-click on it

You should get a blank page

Between the two title tags add: My first web page

Between the two body tags add any sentence you like –you could use Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer

nunc turpis, vestibulum nec tortor eu, lobortis egestas felis. Integer nec risus ornare, euismod diam eu, laoreet lorem.

You should have something like this:

Your title appears here

File name is here

Your content is here

Use the hand-out sheet to evaluate the following websites: http://www.coventry.gov.uk/

http://www.verygoodwebsites.co.uk/

http://www.thecreationmuseum.org/

http://www.strongroom.co.za/

Requires about 10 minutes

When you have completed the form look at the source code. Can you spot the following words: Html script style

Can you see where different languages are being used?

Can you see how the code is affecting what you can see?

Criteria http://www.coventry.gov.uk/ www.verygoodwebsites.co.uk/ www.thecreationmuseum.org/ http://www.strongroom.co.

za/

Choice of colours

Does most navigation

work?

How easy is it to

read?

Does the site/site

content load quickly?

When each site was

last updated?

Delete URL from address bar Type in:

javascript:alert(document.

lastModified)

Does not work in all

browsers

Layout

Is there consistency

across the site?

Text

Font usage

Is there any contact

information

available?

Any other good

points?

On a scale of 1 to 10

(10 being good) rate

this site.

Criteria http://www.coventry.gov.uk/ www.verygoodwebsites.co.uk/ www.thecreationmuseum.org/ http://www.strongroom.co.

za/

Choice of colours Corporate identity Good choice of colours Garish Wow!

Does most navigation

work?

All links work Yes, All links work Yes, but slow No navigation

How easy is it to

read?

Very easy Very easy Difficult Difficult poor definition

Does the site/site

content load quickly?

Yes Yes No Yes

When each site was

last updated?

Delete URL from address bar Type in:

javascript:alert(document.

lastModified)

Does not work in all

browsers

Layout Good, template, CSS Good, template, CSS Disastrous Chopped up picture

Is there consistency

across the site?

Yes Yes No Yes

Text Small, light blue, difficult to read Good use of, easy to read Difficult to read, too many

colours and fonts

Difficult to read

Font usage Consistent Different fonts Good use of fonts Consistent, too small in

places

Is there any contact

information

available?

Yes, as a banner Yes, telephone number on

all pages, address on link

Yes Yes, on main (only)

page

Any other good

points?

Has a site map WC3 compliant, Made use

of a template

No No

On a scale of 1 to 10

(10 being good) rate

this site.

6 6 1 1

Introduction to the course

Had a look at where you got to last year

Basic web pages

More complex markup

Design considerations