1 the web environment
- 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