Slides from Bruce Lawson talk @Codemotion Roma 2014

1. How to destroy the WebBruce Lawson

3. Tigger Warning

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

11. "There is a problem called
Twitter right now and you can
find every kind of lie there. The
thing that is called social
media is the biggest trouble for
society right now."
- Tayyip Erdoğan, PM of Turkey

15. The web
●
Damages trade
●
Promotes social unrest
●
Encourages mistrust of authority
Therefore ...

16. The Web must be destroyed.

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

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

21. Only allow users with the
right devices in

22. Ipad pic, tweet "ipad = IE4"

25. do browser sniffing

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

28. New kids on the block ...
●
Opera 15 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.32
(KHTML, like Gecko) Chrome/27.0.1423.0 Safari/537.32 OPR/15.0.1089.0
● IE11 Mozilla/5.0 (IE 11.0; Windows NT 6.3 ; Trident 7.0; .NET 4.0E; .NET
4.0C; rv:11.0) like Gecko

29. 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)

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

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

36. “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

39. Require script support or
specific plugins

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

44. Ahn Cheol-soo
Active X has “led to
international isolation of
Korean IT” and
“inconvenience for
users.”
Quoted in Wall St Journal
(Image by Jinho Jung
http://en.wikipedia.org/wiki/File:Ahn_Cheol-Soo.jpg)

46. Make the Web
country-specific

47. USA
October 2012 (see www.opera.com/smw)
Top 10 sites (unique users)
1. google.com
2. facebook.com
3. youtube.com
4. yahoo.com
5. wikipedia.org
5. blogspot.com
6. twitter.com
7. amazon.com
8. tumblr.com
9. go.com
Top 10 handsets
1. Apple iPod
2. Apple iPhone
3. LG LGE-VM510 NetFront
4. Android SCH-R720
5. Android VM670
6. Huawei unknown
7. BlackBerry 8520
8. Samsung SPH-M910
9. Samsung SPH-M820-BST
10.Android M860

48. Bangladesh
Top 10 sites
1. facebook.com
2. google.com
3. youtube.com
4. waptrick.com
5. Getjar.com
6. espncricinfo.com
7. wikipedia.org
8. badnews24.com
9. Wap.in
10.Prothom-alo.com
Top handsets
1. Nokia 2700C
2. Nokia 5130
3. Maui E800
4. Nokia 2690
5. Nokia X2 00
6. Nokia X2 01
7. Nokia C1
8. Nokia C3
9. Nokia 6120C
10.Nokia N73
http://www.opera.com/smw/2012/07/

49. UK
Top 10 sites
1. google.com
2. facebook.com
3. youtube.com
4. wikipedia.org
5. bbc.co.uk
6. twitter.com
7. yahoo.com
8. goal.com
9. live.com
10.dailymail.co.uk
Top handsets
1. BlackBerry_BlackBerry8520
2. BlackBerry_BlackBerry9300
3. Nokia_Nokia C3-00
4. BlackBerry_BlackBerry9700
5. BlackBerry_BlackBerry9800
6. Apple_iPhone
7. Android_HTC
8. BlackBerry_BlackBerry9780
9. Maui_E800
10.BlackBerry_BlackBerry9900

53. Require specific types of
hardware

54. Assume a mouse
foo:hover bar {
display:block;
}

55. Hippy BS Way
foo:hover bar,
foo:focus bar
{display:block;}

57. *:focus {
outline:none;
}

58. Assume a visual display

59. Assume a visual display
<SPAN id=:rg class=toxOdd role=link tabIndex=0
closure_hashCode_l16mgm="177">
Create a filter
</SPAN>

60. Assume a visual display
<SPAN id=:rg class=toxOdd role=link tabIndex=0
closure_hashCode_l16mgm="177">
Create a filter
</SPAN>

61. Assume a visual display
<SPAN id=:rg class=toxOdd role=link tabIndex=0
closure_hashCode_l16mgm="177">
Create a filter
</SPAN>

62. Hippy BS Way
<a href=...>Create a filter</a>
(Enhance with Ajax for JS users if you want)

63. Semantics are wasteful

64. Semantics are wasteful
<DIV id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO" tabIndex=0
unselectable="on" closure_hashCode_l16mgm="182" act="">
<DIV class="J-J5-Ji J-K-I-Kv-H" unselectable="on">
<DIV class="J-J5-Ji J-K-I-J6-H" unselectable="on">
<DIV class=J-K-I-KC unselectable="on">
<DIV class=J-K-I-K9-KP unselectable="on">&nbsp;</DIV>
<DIV class=J-K-I-Jz unselectable="on">Search Mail</DIV>
</DIV></DIV></DIV></DIV>

65. Semantics are wasteful
<DIV role=button id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO"
tabIndex=0 unselectable="on" closure_hashCode_l16mgm="182"
act="">
<DIV class="J-J5-Ji J-K-I-Kv-H" unselectable="on">
<DIV class="J-J5-Ji J-K-I-J6-H" unselectable="on">
<DIV class=J-K-I-KC unselectable="on">
<DIV class=J-K-I-K9-KP unselectable="on">&nbsp;</DIV>
<DIV class=J-K-I-Jz unselectable="on">Search Mail</DIV>
</DIV></DIV></DIV></DIV>

66. Hippie BS Web Components way
<button is=kewl-button>Search Mail<button>
document.register('kewl-button', {
extends: 'button'
});
Use Shadow DOM to add markup for styling reasons.

67. <body></body>

68. Break the URL addressing
system

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

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

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

72. http://www.nyse.com/

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

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

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

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

77. www.cybertriallawyer.com/user-agreement

78. Censor the Web

85. Clitheroe
Lightwater
Penistone

86. Clitheroe
Lightwater
Penistone

87. Scunthorpe

89. “We believe that if access to the Web increases
dramatically, there will be significant social
development and greater political representation
among the billions of people who currently have no
voice.”

90. ●
The Internet contributes 3.4 percent to Gross Domestic
Product (GDP) averaged over the 13 countries covered
by the report (21% of GDP growth for the most
developed countries)
●
The Internet creates 2.6 jobs for each lost to
technology-related efficiencies
(See What good is the web? Some numbers
http://www.brucelawson.co.uk/2012/what-good-is-the-web-some-numbers/)

91. ●
Most of the economic value created by the Internet falls
outside of the technology sector, with 75 percent of the
benefits captured by companies in more traditional
industries
●
There’s a 10% increase in productivity for Small and
medium enterprises (SMEs) from Internet use
●
SMEs heavily using Web technology grow and export
twice as much as others

92. “An increase in Internet maturity similar to the one
experienced in mature countries over the past 5 years
creates an increase in real GDP per capita of $500 on
average during this period.
It took the Industrial Revolution of the 19th century 50
years to produce the same result.”

93. WWW

95. www.opera.com/developer
bruce.lawson@opera.com
www.brucelawson.co.uk
twitter.com/brucel

96. 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
●
Erdoğan photo http://en.wikipedia.org/wiki/File:Tayyip_Erdoğan.JPG
●
http://twitter.com/#!/dhh/status/32471503853322241
●
ZX81 http://www.flickr.com/photos/austinevan/3368452115/sizes/o/in/photostream/
●
xkcd app catoon http://xkcd.com/1174/
●
Quora being stupid http://www.flickr.com/photos/41894155216@N01/8750997471
●
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
●
Lightwater map, © OpenStreetMap contributors