• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
1   the web environment
 

1 the web environment

on

  • 736 views

First lecture from Web Page Design module 2011. Copyright © 2011 University of Salford.

First lecture from Web Page Design module 2011. Copyright © 2011 University of Salford.

Statistics

Views

Total Views
736
Views on SlideShare
735
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    1   the web environment 1 the web environment Presentation Transcript

    • The Web Environment Web Page DesignFriday, 30 September 11
    • Overview • Internet and the web • Network details • Evolution of the web • Web technologies • Web standardsFriday, 30 September 11
    • The Internet • A massive number of computers connected together through a global network • Carries a range of data: • Email • Web • File transfer • Audio video dataFriday, 30 September 11
    • 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 clientFriday, 30 September 11
    • 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 networkFriday, 30 September 11
    • 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:7334Friday, 30 September 11
    • 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 addressFriday, 30 September 11
    • Uniform Resource Locator • Specifies how and where to find an internet resource • Three parts: protocol, address, selector • Example: http://www.rickogden.com/ tutorials/960gsFriday, 30 September 11
    • 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
    • Resource address • IP address or domain name • http://www.rickogden.comFriday, 30 September 11
    • Resource details • Selector string e.g. Path to a particular folder/file on web site • http://www.rickogden.com/tutorials/960gsFriday, 30 September 11
    • 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.htmlFriday, 30 September 11
    • 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.htmlFriday, 30 September 11
    • Client server model The client requests a web page from the server Client Server Server generates a stream of HTML/CSS to clientFriday, 30 September 11
    • 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 designFriday, 30 September 11
    • 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. JavaScriptFriday, 30 September 11
    • 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 existFriday, 30 September 11
    • 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
    • Two key concepts • Separation of structure/content from presentation • Use CSS for layout NOT tablesFriday, 30 September 11
    • Standards-based design • Separate presentation from structure • dont select an element based on how it looks in a browser • dont use deprecated elements and attributes • dont use tables for layout • Use DOCTYPE declarations • enables DOCTYPE switching • facilitates validation • Validate both HTML and CSS rulesFriday, 30 September 11
    • 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 browserFriday, 30 September 11
    • 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 browserFriday, 30 September 11
    • 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 displayFriday, 30 September 11
    • 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 displayFriday, 30 September 11
    • 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 displayFriday, 30 September 11
    • 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 displayFriday, 30 September 11
    • 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 thisFriday, 30 September 11
    • 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 RulesFriday, 30 September 11
    • 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 stylesheetFriday, 30 September 11