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