The document discusses the web environment and web page design. It provides an overview of the internet and the web, including how they work, their evolution, and underlying technologies. It describes internet addressing, domain names, URLs, and the client-server model. It also discusses static and dynamic web pages, web standards, and variations in web clients like browsers, displays, and operating systems.

1. The Web Environment
Web Page Design
Friday, 30 September 11

2. Overview
• Internet and the web
• Network details
• Evolution of the web
• Web technologies
• Web standards
Friday, 30 September 11

3. The Internet
• A massive number of computers connected
together through a global network
• Carries a range of data:
• Email
• Web
• File transfer
• Audio video data
Friday, 30 September 11

4. The Web
• A global collection of hyperlinked pages
connected via the internet
• Web pages are stored on a server
• The user views web pages on a client
Friday, 30 September 11

5. Internet addressing
(IPv4)
• logical not physical
• 32-bit binary number
• written as 4 decimal numbers separated by dots
• e.g. 146.87.119.37
• 146.87 is University of Salford
• 119 is one network at Salford
• 37 is a computer on that network
Friday, 30 September 11

6. Internet addressing
(IPv6)
• We have now run out of IP addresses
• IPv4 only has about 4.3 billion addresses
• Addresses consist of 8 groups of 4
hexadecimal digits (with : as separator)
• 2001:0db8:85a3:0000:0000:8a2e:0370:7334
Friday, 30 September 11

7. Domain names
• Easier for people to remember names than
numbers
• www.salford.ac.uk
• www.rickogden.com
• Domain name service (DNS) converts
name to numerical IP address
Friday, 30 September 11

8. Uniform Resource
Locator
• Specifies how and where to find an internet
resource
• Three parts: protocol, address, selector
• Example: http://www.rickogden.com/
tutorials/960gs
Friday, 30 September 11

9. Protocol
• Specifies the protocol used to communicate
with server
• Example protocols:
• HTTP - the protocol of the Web
• FTP - access an FTP server
• Mailto - send an email message
• http://
Friday, 30 September 11

10. Resource address
• IP address or domain name
• http://www.rickogden.com
Friday, 30 September 11

11. Resource details
• Selector string e.g. Path to a particular
folder/file on web site
• http://www.rickogden.com/tutorials/960gs
Friday, 30 September 11

12. Index page
• If no filename specified, server
automatically serves (by default) the file
called index.html
• Home page of website should be called
index.html
• Do not use other variations e.g.
Homepage.html, assignment.html
Friday, 30 September 11

13. URL format
• Applies to folder and filenames as well as URL
• Only use lowercase letters:
• index.html NOT Index.html
• Do not use spaces
• my_contacts.html NOT my contacts.html
• Use meaningful names
• gigs.html NOT page1.html
Friday, 30 September 11

14. Client server model
The client requests a web
page from the server
Client Server
Server generates a stream
of HTML/CSS to client
Friday, 30 September 11

15. Static web pages
• All users always get the same information
from a page
• No user interaction
• Limited functionality
• Completed web page is stored on server
• HTML / CSS
• Starting point for web page design
Friday, 30 September 11

16. Dynamic web pages
• Page may be different depending on user
and time of request
• Extended functionality
• Web page is generated on demand
• HTML / CSS plus server side programming
e.g. php, ASP.NET, Python, Ruby plus client
side programming e.g. JavaScript
Friday, 30 September 11

17. Web standards
• Allow all browsers to display all web pages
• Allow web pages to be accessible to
everyone
• W3C (World Wide Web Consortium)
creates recommendations that are de facto
standards
• Other standard organisations exist
Friday, 30 September 11

18. Web standards for this
module
• Structural layer (HTML 5)
• defines the structure of a document, e.g. Headings,
paragraphs, lists, sections etc.
• Evolved from HTML 4.01 and XHTML 1.1
• Presentation layer (CSS Level 3)
• defines rules for the presentation of the elements
that make up a page
• controls fonts, colour, margins, position on the page
or screen, etc.
Friday, 30 September 11

19. Two key concepts
• Separation of structure/content from
presentation
• Use CSS for layout NOT tables
Friday, 30 September 11

20. Standards-based design
• Separate presentation from structure
• don't select an element based on how it looks in a
browser
• don't use deprecated elements and attributes
• don't use tables for layout
• Use DOCTYPE declarations
• enables DOCTYPE switching
• facilitates validation
• Validate both HTML and CSS rules
Friday, 30 September 11

21. Client variation -
browsers
Firefox 42.2%
Chrome 27.9%
Internet Explorer 23.2%
Safari 3.7%
Opera 2.4%
Figures show visitors to w3schools.com website in June 2011 by browser
Friday, 30 September 11

22. Client variation -
browsers
Chrome 43.62%
Firefox 40.72%
Internet Explorer 6.96%
Safari 3.33%
Opera 2.9%
Figures show visitors to rickogden.com website in June 2011 by browser
Friday, 30 September 11

23. Client variation -
display
1280x1024 14.8%
1280x800 14.4%
1024x768 10.43%
1366x768 10.1%
1440x900 9.9%
Figures show visitors to w3schools.com website in January 2011 by display
Friday, 30 September 11

24. Client variation -
display
1680x1050 24.35%
1280x800 13.77%
1280x1024 11.59%
1366x768 10.43%
1920x1080 9.57%
Figures show visitors to rickogden.com website in June 2011 by display
Friday, 30 September 11

25. Client variation - OS
Windows 85.1%
Macintosh 8.1%
Linux 5.2%
iOS 0.54%
Android 0.21%
Figures show visitors to w3schools.com website in June 2011 by display
Friday, 30 September 11

26. Client variation - OS
Windows 54.93%
Linux 29.71%
Macintosh 13.19%
iOS 0.58%
Android 0.43%
Figures show visitors to rickogden.com website in June 2011 by display
Friday, 30 September 11

27. The challenge
• To make a web site operate satisfactorily
for every user, regardless of browser/
display/operating system combination
• Use standards compliant design to achieve
this
Friday, 30 September 11

28. Design for compatibility
• Page need not look the same in all browsers
• graded browser support
• ensure content is accessible and usable
• Follow Web standards for content markup
• Follow accessibility guidelines
• Follow standards for CSS Rules
Friday, 30 September 11

29. The design process
• design for good standard-compliant
browser: Firefox
• test in other standard-compliant browsers
• fix problems
• test in older browsers
• work around problems by splitting up
stylesheet
Friday, 30 September 11