week 1 lesson 1 introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...does not work...
TRANSCRIPT
![Page 1: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/1.jpg)
Week 1 – Lesson 1
Introduction
![Page 2: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/2.jpg)
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.
![Page 3: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/3.jpg)
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
![Page 4: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/4.jpg)
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.
![Page 5: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/5.jpg)
Learn CSS (25%)
Learn JavaScript (25%)
Practical work in the form of assignment work and in class sessions (50%)
![Page 6: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/6.jpg)
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
![Page 7: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/7.jpg)
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.
![Page 8: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/8.jpg)
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
![Page 9: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/9.jpg)
Layout
Loading speed
Code optimisation
Consistency
Templates
![Page 10: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/10.jpg)
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...
![Page 11: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/11.jpg)
We can all add content
We can play with:
Text
Images
Sound
Video
Colour
Headings
•Lorem ipsum
•Place holders – e.g. stock images
![Page 12: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/12.jpg)
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
![Page 13: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/13.jpg)
![Page 14: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/14.jpg)
![Page 15: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/15.jpg)
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…….
![Page 16: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/16.jpg)
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’.
![Page 17: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/17.jpg)
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.
![Page 18: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/18.jpg)
Must make use of CSS (not just yet, but later)
inline CSS
Embedded CSS
a separate style sheet
Interaction (at least 3 separate types)
![Page 19: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/19.jpg)
Require a storyboard
Produce a site map
Make use of graphics
More to come........(yes, I am a terrible customer!!)
![Page 20: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/20.jpg)
A brief look at what you should know
![Page 21: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/21.jpg)
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
![Page 22: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/22.jpg)
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.
![Page 23: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/23.jpg)
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
![Page 24: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/24.jpg)
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
![Page 25: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/25.jpg)
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’>
![Page 26: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/26.jpg)
Open Notepad or Notepad++
Enter the following:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
![Page 27: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/27.jpg)
Include the
extension
Change this to:
All Files or HTML
Save to z:drive or pen drive
![Page 28: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/28.jpg)
Now open a browser
Locate your file and double-click on it
You should get a blank page
![Page 29: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/29.jpg)
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.
![Page 30: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/30.jpg)
You should have something like this:
Your title appears here
File name is here
Your content is here
![Page 31: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/31.jpg)
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?
![Page 32: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/32.jpg)
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.
![Page 33: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/33.jpg)
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
![Page 34: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/34.jpg)
Introduction to the course
Had a look at where you got to last year
Basic web pages
![Page 35: Week 1 Lesson 1 Introductionwiki.computing.hct.ac.uk/_media/computing/btec/level3/...Does not work in all browsers Layout Good, template, CSS Good, template, CSS Disastrous Chopped](https://reader033.vdocuments.site/reader033/viewer/2022051916/600819122efebb643029d719/html5/thumbnails/35.jpg)
More complex markup
Design considerations