bruce lawson stockholm geek meet

57
Open Standards: democratising and future-proofing the Web Bruce Lawson / Geek Meetup / Stockholm / 20 September 2010

Upload: brucelawson

Post on 18-Dec-2014

1.004 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Bruce lawson Stockholm Geek Meet

Open Standards: democratising and future-proofing the Web

Bruce Lawson / Geek Meetup / Stockholm / 20 September 2010

Page 2: Bruce lawson Stockholm Geek Meet

Web Evangelist at Opera

Page 3: Bruce lawson Stockholm Geek Meet

Opera – one browser on many devices

Page 4: Bruce lawson Stockholm Geek Meet

"Our goal is to take the one true Web and make it available to people on their terms."

Jon S. von Tetzchner, Opera Co-founder

"All I ask is access to the full Web, everywhere. And some more beer."

Me

Page 5: Bruce lawson Stockholm Geek Meet

Executive Summary:

Open Web Standards make the Web open for people with disabilities and people without access to the latest expensive hardware.

Page 6: Bruce lawson Stockholm Geek Meet

Executive Summary continued:

Open Web Standards reduce reliance on any single vendor.

Open Web Standards = profit!

Page 7: Bruce lawson Stockholm Geek Meet
Page 8: Bruce lawson Stockholm Geek Meet
Page 9: Bruce lawson Stockholm Geek Meet

The most important program on your computer is your browser

Page 10: Bruce lawson Stockholm Geek Meet
Page 11: Bruce lawson Stockholm Geek Meet

Legal and General's redesignwww.brucelawson.co.uk/pas78

Page 12: Bruce lawson Stockholm Geek Meet

By-products of the redesign:

● 30% increase in natural search-engine traffic ● 75% reduction in page load time● No more browser-incompatibility problems● Accessible to mobile devices● Time spent to manage content “reduced from 5 days to 0.5 days per job”

Page 13: Bruce lawson Stockholm Geek Meet

No money, no honey etc

● Savings of £200,000 annually on site maintenance ● 90% increase in online sales● 100% return on investment in less than 12 months.

Page 14: Bruce lawson Stockholm Geek Meet

1. new web standards2. adaptive content3. browser as platform

Page 15: Bruce lawson Stockholm Geek Meet

1. new web standards2. adaptive content3. browser as platform

Page 16: Bruce lawson Stockholm Geek Meet

HTML5<!DOCTYPE html>

Page 17: Bruce lawson Stockholm Geek Meet

HTML5 does not replace HTML 4.01

Page 18: Bruce lawson Stockholm Geek Meet

HTML5 has more bling!

Page 19: Bruce lawson Stockholm Geek Meet

“...extending the language to better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.”

Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

Page 20: Bruce lawson Stockholm Geek Meet

HTML5 is umbrella term:markup elements and JavaScript APIs

Page 21: Bruce lawson Stockholm Geek Meet

Webforms – more powerful form elementsValidation, without JavaScript

Page 22: Bruce lawson Stockholm Geek Meet

<canvas> “scriptable images”

Page 23: Bruce lawson Stockholm Geek Meet

<video>

Page 24: Bruce lawson Stockholm Geek Meet

video as native object...why is it important?

● “play nice” with rest of the page● keyboard accessibility built-in● API for controls● developers have a choice

Page 25: Bruce lawson Stockholm Geek Meet

1. new web standards2. adaptive content3. browser as platform

Page 26: Bruce lawson Stockholm Geek Meet

WWW

Page 27: Bruce lawson Stockholm Geek Meet

Wealthy Western Web

Page 28: Bruce lawson Stockholm Geek Meet

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/

Page 29: Bruce lawson Stockholm Geek Meet

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

Page 30: Bruce lawson Stockholm Geek Meet

India

There is one bank branch for every 14,000 people, one ATM for every 5000 people but amobile for every 2.3 people in India.

More people in India have access to a mobilephone than even a proper toilet.

Page 31: Bruce lawson Stockholm Geek Meet

“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

Page 32: Bruce lawson Stockholm Geek Meet

1. do nothing

Page 33: Bruce lawson Stockholm Geek Meet

not WAP or text anymore...

Page 34: Bruce lawson Stockholm Geek Meet

mobile browserswill work ok-ish

Page 35: Bruce lawson Stockholm Geek Meet

2. separate mobile site(m.flickr.com, mobile.mysite.com, ...)

Page 36: Bruce lawson Stockholm Geek Meet

beware browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/

Page 37: Bruce lawson Stockholm Geek Meet

refactored for small screen,not dumbed down for mobile

Page 38: Bruce lawson Stockholm Geek Meet

offer users choice:desktop or mobile?

Page 39: Bruce lawson Stockholm Geek Meet
Page 40: Bruce lawson Stockholm Geek Meet
Page 41: Bruce lawson Stockholm Geek Meet

3. single adaptive site

Page 42: Bruce lawson Stockholm Geek Meet

CSS 3 Media Queries:

@media screen and (max-device-width: 480px) { // insert CSS rules here

}http://www.w3.org/TR/css3-mediaqueries/

Demonstration of Media Queries

Page 43: Bruce lawson Stockholm Geek Meet
Page 44: Bruce lawson Stockholm Geek Meet

1. new web standards2. adaptive content3. browser as platform

Page 45: Bruce lawson Stockholm Geek Meet
Page 46: Bruce lawson Stockholm Geek Meet

“…the browser run-time is perfect…you’re out of writing for Windows Mobile, Android, S60, each of which require testing...we want to abstract that.

All the cool innovation is happening inside the browser – you don’t need to write to the native operating system anymore.”

Mobile Entertainment Market, June, 2009

Page 47: Bruce lawson Stockholm Geek Meet

W3C Widgets – application development filled with web standards goodness,

using browser engine as platform

Page 48: Bruce lawson Stockholm Geek Meet

Anatomy of a widget

Page 49: Bruce lawson Stockholm Geek Meet

W3C DAP(Devices and Protocols Working Group)

Page 50: Bruce lawson Stockholm Geek Meet

Defining JavaScript APIs:

● Contacts (access address book)● Calendar API● Media Capture API (programmatic access to camera/microphone)● Messaging API (email/ SMS)

http://www.w3.org/2009/dap/Read all about it: http://berjon.com/blog/2010/09/dap.html

Page 51: Bruce lawson Stockholm Geek Meet
Page 52: Bruce lawson Stockholm Geek Meet
Page 53: Bruce lawson Stockholm Geek Meet

1. new web standards2. adaptive content3. browser as platform

Page 54: Bruce lawson Stockholm Geek Meet
Page 55: Bruce lawson Stockholm Geek Meet
Page 56: Bruce lawson Stockholm Geek Meet