CO1552 – Web Application Development

1. CO1552 – Web Application Development Web Browsers

2. Browsers • Once upon a time • There were only text browsers! • Now, desktop machines can render • Text • HTML Forms • Images • Sound • Animations • Video • Increasingly mobile devices are being connected to the Web • What browser does your Phone use?

3. Browsers: Lynx • So called as it allows users to follow Links • A Text-only browser • Fast, because it refuses to bother with images and glitz • Good for accessibility testing, because it shows how your page will be read by disabled users • Can take a while to get used to for new users

4. Browsers: Netscape Navigator • One of the earliest players in the graphical browser league • Originally, displayed HTML under different conventions from Internet Explorer • Text sizes were rendered smaller • Colour rendering used a different set of 256 colours • Supported functions e.g. its own version of JavaScript • All differed from IE • Was available freely on magazine CDs and for download from Web • Released source code as Open Source in 1995

5. Browsers: Internet Explorer • IE, being a Microsoft product • Supported functions that were not available in Netscape (e.g. VBScript) • Did not support functions that were available in Netscape (e.g. JavaScript) • Attempted to “take over” (so what’s new) • Sparked “the Browser Wars” • It was not only available on magazine CDs – but – it was also bundled with Windows • Therefore it became the default browser on many users’ machines and almost “killed off” the opposition

6. Standardisation!! • HTML was being pushed into many forms it wasn’t originally designed for • NN and IE were rendering HTML in different ways and supporting different methods • Designers were having to • Write 2 versions of every page • One for NN • One for IE • Use JavaScript or VBScript to diagnose which browser was in use • Then offer the “correct” version of a page to the user

7. Standardisation!! • The World Wide Web Consortium was created • “W3C” • www.w3.org • “The W3C is an international industry consortium whose purpose is to create common standards for global interoperability and continuously enhance functionality in a vendor-neutral manner.”

8. W3C • Was formed to create standards for HTML from the general guidelines within the main browsers • Still defines the different versions • HTML 2, 3.2, 4 (VERY old definitions, now superseded) • 4.01 (Transitional, Frameset or Strict) • XHTML

9. Convergence • New versions of browsers now comply with the W3C standards – in the main • Browsers now work much more in line with each other • There are still subtle differences • e.g. NN and Firefox do not show the ALT tags on your images except while loading • IE and Firefox render some Cascading Style Sheet effects slightly differently • Most HTML and XHTML pages should now look the same in all new versions of browsers

10. W3C • Defines all variants of HTML such as DHTML, XHTML and XML • Supplies a validator to check your pages, online or on your own machine • Supplies a “Tidy” program which will check your HTML/XHTML for redundancy or wrongly nested tags • “Accessibility initiative” encourages designers to build for ALL users

11. Which browser? • Not everyone uses IE • Netscape, Opera, FireFox, Lynx all have their uses • Non-Microsoft browsers are less vulnerable to spyware and adware

13. Statistics: 2005, 2006, 2007 • Microsoft Internet Explorer: ~91% > 62% > 57% • Down from a high of >90% 4 years ago • Probably will continue to fall • Alternate browsers are improving • Mozilla type browsers (eg Firefox, Netscape, Mozilla and Opera) ~5% > 30% > 37% • Safari (mac): ~1% > ~1% > ~2% • Others ~2% > 6% > ~2% • Source Data: http://www.w3schools.com/browsers/browsers_stats.asp • There are other sources of data that give different figures • Not really reliable as browsers can be instructed to identify themselves as whatever the user wishes!

14. Info from “webhits” (Sept 2007)

15. Browser independence • You should be designing: • Pages that can work on any browser • New; old; text • Pages that can be read by a “screen reader” • Testing in a text browser will show up problems for disabled users • If you decide to use a HTML editor, hand-code your pages • At the very least read the XHTML as it is created! • Try to keep your XHTML tidy and elegant • Avoid fancy editor-controlled effects which may only work in ONE browser

16. Be inclusive! • If IE has around 60% of the users, then • 40% (nearly half of all users) are using something else • Netscape, Opera, Mozilla, FireFox, Lynx • Be careful, you could be discriminating users • If customers like your products (your website) • They will be very valuable customers • They probably will give you repeat business • BUT if they cannot use your site • they will not buy, nor recommend, your products • Include everyone by good design!

17. Testing • Always test your pages before making them live • Test in at least the 2 main browsers and a text browser • NN, IE, Mozilla Firefox and Lynx • Run the W3C validator on them • Run an accessibility test, eg “Bobby” • However, there is no one tool that is completely effective in confirming accessibility • Experience is the best benchmark • After all that, present them to your client • Stand firm on your inclusive design decisions!