1 the web environment

The Web Environment
Web 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


Uniform Resource
Locator
• Speciﬁes how and where to ﬁnd an internet
resource
• Three parts: protocol, address, selector
• Example: http://www.rickogden.com/
tutorials/960gs


Protocol
• Speciﬁes 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/ﬁle on web site
• http://www.rickogden.com/tutorials/960gs


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 ﬁlenames 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
The client requests a web
page from the server

Client Server

Server generates a stream
of 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)
• deﬁnes 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)
• deﬁnes 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
• ﬁx problems
• test in older browsers
• work around problems by splitting up
stylesheet


1 the web environment

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a 1 the web environment

Semelhante a 1 the web environment (20)

Último

Último (20)

1 the web environment