Fronteers, Amsterdam 14 June 2012

Slide 1

Slide 1 text

How to destroy the Web Bruce Lawson

Slide 2

Slide 2 text

The principles of universality of access irrespective of hardware or software platform, network infrastructure, language, culture, geographical location, or physical or mental impairment are core values Tim Berners-Lee

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

The Web must be destroyed.

Slide 9

Slide 9 text

Rebuild monoculture

Slide 10

Slide 10 text

Ancient history

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Evil sys admins

Slide 13

Slide 13 text

Evil Enterprise Software vendors

Slide 14

Slide 14 text

IE6 funeral etc

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

October 1998

Slide 17

Slide 17 text

For the Good of the Web: An Open Letter to Netscape (20 July 2000) TWO YEARS AGO, when your market share was still high as a kite, you pledged to fully support five key standards in the next version of your browser... At last you are talking about shipping product by the end of the year. Sounds great – except that it’s the wrong year.

Slide 18

Slide 18 text

Continuing to periodically “upgrade” your old browser while failing to address its basic flaws has made it appear that you still consider Navigator 4 viable. It is not. ... keeping your 4.0 browser on the market has forced developers to continue writing bad code in order to support it. If you fail now, the web will essentially belong to a single company. And for once, nobody will be able to blame them for “competing unfairly.” So please, for your own good, and the good of the web, deliver on your promises while Netscape 6 still has the chance to make a difference.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Internet Explorer 6 beta shows great promise www.techrepublic.com/article/internet-explorer-6-beta-shows-great-promise/1033023

Slide 22

Slide 22 text

Microsoft Internet Explorer offers few quirks and many superb features... After introducing IE-only layout features such as scrolling marquees and colored table borders in earlier versions, Microsoft is now committed to the standards set by the World Wide Web Consortium. www.pcmag.com/article2/0,2817,541298,00.asp

Slide 23

Slide 23 text

WaSP IE6 for Windows delivers fine support for HTML 4, CSS-1, and other important W3C standards. web.archive.org/web/20011201032740/http://www.webstandards.org/upgrade/

Slide 24

Slide 24 text

I Love This Browser! I have loved browsing the web since I started way back in the mid 90s, and I really love browsing with IE.

Slide 25

Slide 25 text

I Love This Browser! I have loved browsing the web since I started way back in the mid 90s, and I really love browsing with IE. Scott Stearns Test Manager, IE blogs.msdn.com/b/ie/archive/2004/07/21/190747.aspx

Slide 26

Slide 26 text

● DOCTYPE switching (for broken box model) ● HTML Components (.htc files) ● CSS Expressions ● Coloured scroll bars ● IE filters and DHTML behaviors ●

Slide 27

Slide 27 text

Why?

Slide 28

Slide 28 text

Hell is other browsers "The browser is a really hostile programming environment."

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

http://getcrackin.angrybirds.com/

Slide 34

Slide 34 text

if (!Modernizr.hasEvent("touchmove", window)) { // not mobile if (Modernizr.testProp('-webkit-box-shadow')) { // is WebKit $("#roadblock").addClass("loading"); $("head").append(''); GetCrackin.init(); } else { $("#roadblock").addClass("chrome"); } } else { $("#roadblock").addClass("mobile"); }

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Let's face facts: the Web will never be the dominant platform. . It would help if all the rendering engines but one were to die, but even that would not be enough. Even if WebKit was the only game in town, it would still be crucial for it to have competent, sympathetic, benevolent leaders. joehewitt.com/2011/09/22/web-technologies-need-an-owner

Slide 37

Slide 37 text

32% developers want monoculture http://urtak.is/vOtBLj

Slide 38

Slide 38 text

-webkit-box-shadow -webkit-transform -webkit-transform-origin -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function -webkit-linear-gradient

Slide 39

Slide 39 text

http://en.wikipedia.org/wiki/Browser_wars#The_first_browser_war

Slide 40

Slide 40 text

do browser sniffing

Slide 41

Slide 41 text

A short sad history of browser sniffing (http://webaim.org/blog/user-agent-string-history/) Mosaic NCSA_Mosaic/2.0 (Windows 3.1) Netscape Mozilla/1.0 (Win3.1) IE: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95) Firefox: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko/20020826 Konqueror: Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko) Opera: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.51, or Mozilla/5.0 (Windows NT 6.0; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.51, or Opera/9.51 (Windows NT 5.1; U; en) Safari: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5 Chrome: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

Slide 42

Slide 42 text

Script: https://github.com/404 (27 Jan 2011) // Detect if the browser is IE or not. // If it is not IE, we assume that the browser is NS. var IE = document.all?true:false; // If NS -- that is, !IE -- then set up for mouse capture if (!IE) document.captureEvents(Event.MOUSEMOVE); (Lots more fun at https://github.com/miketaylr/Snort/blob/master/snort.yml)

Slide 43

Slide 43 text

Only allow users with the right devices in

Slide 44

Slide 44 text

Ipad pic, tweet "ipad = IE4"

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Towards a World-Wide Web 1.6 billion people are online, yet more than 4 billion people — two out of every three people on Earth — have a mobile phone or access to one. www.opera.com/smw/2009/10/

Slide 49

Slide 49 text

China “The proportion of [people] accessing the Internet by mobile increased enormously from 39.5% in late 2008 to 46% in June 2009, while the proportion of using desktops and laptops decreased”. (close to 150 million people). Statistical Report on Internet Development in China, p25-26, July 2009, www.ccnic.cn

Slide 50

Slide 50 text

There is one bank branch for every 14,000 people, one ATM for every 5000 people but a mobile for every 2.3 people in India (563.73 million) . India has more mobile phones than toilets.

Slide 51

Slide 51 text

“One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices.” W3C Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/#OneWeb

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Require script support or specific plugins

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

http://www.koreatimes.co.kr/www/news/biz/2010/05/123_52401.html

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Make the Web country-specific

Slide 58

Slide 58 text

USA www.opera.com/smw September 2011 Top 10 sites (unique users) 1. google.com 2. facebook.com 3. youtube.com 4. wikipedia.org 5. yahoo.com 6. amazon.com 7. my.opera.com 8. accuweather.com 9. twitter.com 10.espn.go.com Top 10 handsets, Sept 2011 1. LG VM510 “Rumor Touch” 2. LG VM265 “Rumor2” 3. BlackBerry 8520 “Curve” 4. BlackBerry 9700 “Bold” 5. BlackBerry 9300 “Curve” 6. BlackBerry 8530 “Curve” 7. LG VM670 8. Sanyo SCP6760 9. Nokia 5130 XpressMusic 10.BlackBerry 9800 “Torch”

Slide 59

Slide 59 text

Bangladesh Top 10 sites 1. facebook.com 2. google.com 3. youtube.com 4. waptrick.com 5. wikipedia.org 6. espncricinfo.com 7. getjar.com 8. yahoo.com 9. my.opera.com 10.filestube.com Top handsets 1. Nokia 5130 XpressMusic 2. Nokia 2700 3. Nokia 2690 4. Nokia X2 5. Nokia 3110c 6. Nokia 6300 7. Nokia C1 8. Nokia N70 9. Nokia 2730c 10.Nokia N73

Slide 60

Slide 60 text

UK Top 10 sites 1. google.com 2. facebook.com 3. bbc.co.uk 4. youtube.com 5. wikipedia.org 6. twitter.com 7. live.com 8. my.opera.com 9. yahoo.com 10.amazon.co.uk Top handsets 1. BlackBerry 8520 “Curve” 2. Nokia C3 3. BlackBerry 9700 “Bold” 4. BlackBerry 9300 “Curve” 5. Nokia 2330c 6. Alcatel OT-800 7. BlackBerry 9800 “Torch” 8. Nokia X2 9. Nokia 6700c 10.Nokia 2730c

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Use royalty-encumbered data formats

Slide 65

Slide 65 text

video formats webM Ogg/ Theora mp4/ h264 Opera yes yes Chrome yes yes Nope (Chrome.soon) Firefox Yes (FF4) yes Safari yes IE9 Yes (if installed) yes

Slide 66

Slide 66 text

The politics of codecs

Slide 67

Slide 67 text

Require specific types of hardware

Slide 68

Slide 68 text

Assume a mouse *:focus {outline:none;} foo:hover bar {display:block; …}

Slide 69

Slide 69 text

Assume a visual display

Slide 70

Slide 70 text

Create a filter Source: http://www.paciellogroup.com/blog/?p=585

Slide 71

Slide 71 text

Semantics are wasteful

Slide 72

Slide 72 text

Search Mail

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Break the URL addressing system

Slide 76

Slide 76 text

The reason the web is so powerful is that it is a web of information. One piece of data is linked with another piece of data is via a URL. Directly addressable content is what makes web apps better than desktop apps. danwebb.net/2011/5/28/it-is-about-the-hashbangs

Slide 77

Slide 77 text

#! See http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs

Slide 78

Slide 78 text

NYSE Euronext prohibits ... unauthorized hypertext links by others to the NYSE Euronext Web-site. NYSE Euronext reserves the right to disable any unauthorized links.

Slide 79

Slide 79 text

http://www.nyse.com/

Slide 80

Slide 80 text

Use of any Web browsers (other than generally available third- party browsers), engines, software, spiders, robots, avatars, agents, tools or other devices or mechanisms to navigate, search or determine the NYSE Web-site is strictly prohibited.

Slide 81

Slide 81 text

You agree you will not, and will not permit any third party to obstruct, receive, modify or otherwise interfere with the display or delivery of advertisements on the NYSE Web-site.

Slide 82

Slide 82 text

You may print or download a single, unaltered, permanent copy or one temporary copy in a single computer’s memory of any Content for your personal, non-commercial use only

Slide 83

Slide 83 text

You agree to review this Agreement each time you access the NYSE Euronext Web-site so that you are aware of any and all modifications made to this Agreement since your last visit

Slide 84

Slide 84 text

Censor the Web

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Clitheroe Lightwater Penistone

Slide 87

Slide 87 text

Clitheroe Lightwater Penistone

Slide 88

Slide 88 text

Scunthorpe

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

WWW

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

www.opera.com/developer [email protected] www.brucelawson.co.uk twitter.com/brucel

Slide 93

Slide 93 text

Image/ screenshot credits ● http://iranian-girl.blogspot.com/ ● http://iraniandoughter.blogspot.com/2010/08/my-haven.html ● http://bbwob.blogspot.com/2008/05/atrocities-by-military-regime.html ● http://twitter.com/#!/dhh/status/32471503853322241 ● ZX81 http://www.flickr.com/photos/austinevan/3368452115/sizes/o/in/photostream/ ● Address book photo http://www.flickr.com/photos/anderspee/5243086788/ ● Sharks with lasers http://www.flickr.com/photos/starstreak007/3416655056/sizes/l/in/faves-24374884@N08/ ● Browser sniffing http://www.flickr.com/photos/timdorr/2096272747/ ● Indian mobile phones http://www.flickr.com/photos/worldbank/3492673512/ ● Telegraph report (Indian mobile subscribers) 15 April 2010, http://www.telegraph.co.uk/news/worldnews/asia/india/7593567/India-has-more-mobile-phones-than-toilets-UN-report.html ● Country stats and handset breakdown on free monthly State of the Mobile Web report http://opera.com/smw