1 the web environment

The Web EnvironmentWeb Page Design

Friday, 30 September 11

Overview

• Internet and the web

• Network details

• Evolution of the web

• Web technologies

• Web standards


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


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


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


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


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


http://www.salford.ac.uk


http://www.tesco.com

http://www.tesco.com

Uniform Resource Locator

• Specifies how and where to find an internet resource

• Three parts: protocol, address, selector

• Example: http://www.rickogden.com/tutorials/960gs


http://www.rickogden.com/tutorials/960gs




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://


Resource address

• IP address or domain name

• http://www.rickogden.com




Resource details

• Selector string e.g. Path to a particular folder/file on web site

• http://www.rickogden.com/tutorials/960gs


http://www.salford.ac.uk/profiles/eustace

http://www.salford.ac.uk/profiles/eustace

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


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


Client server model

Client Server

The client requests a webpage from the server

Server generates a streamof HTML/CSS to client


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


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


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


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.


Two key concepts

• Separation of structure/content from presentation

• Use CSS for layout NOT tables


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


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


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


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


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


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


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


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


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


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


1 the web environment

Education