1 / 17

CO1552 – Web Application Development

CO1552 – Web Application Development. Web Browsers. 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?.

adolfo
Download Presentation

CO1552 – Web Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

  12. 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!

  13. Info from “webhits” (Sept 2007)

  14. 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

  15. 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!

  16. 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!

More Related