Reset The Web • Yiibu

7/31/2019 Reset The Web Yiibu

1/170

reset

a brief stroll into our past and our future

http://www.flickr.com/photos/karen_r oe

the web
http://www.flickr.com/photos/karen_roehttp://www.flickr.com/photos/karen_roehttp://www.flickr.com/photos/karen_roe


2/170

http://www.flickr.com/photos/psd/3149878971

the web is less than

8000 days old...

Hat tip to Kevin Kelly - The next 5000 days of the web
http://www.kk.org/presentations.phphttp://www.kk.org/presentations.phphttp://www.kk.org/presentations.phphttp://www.kk.org/presentations.phphttp://www.flickr.com/photos/psd/3149878971http://www.flickr.com/photos/psd/3149878971


3/170

it reaches

1/3* ofpeopleon our planet

2012 estimates put the population at about 7 billion inhabitants... http://www.flickr.com/photos/vitroids/2753929716
http://www.flickr.com/photos/vitroids/2753929716http://www.flickr.com/photos/vitroids/2753929716


4/170

http://www.flickr.com/photos/viirok/2498157861

it powers business,

entertainment,

learning...
http://www.flickr.com/photos/viirok/2498157861http://www.flickr.com/photos/viirok/2498157861


5/170

http://www.icanhascheezburger.com/

and so

and so much more...
http://www.flickr.com/photos/tinou/453593446http://www.flickr.com/photos/tinou/453593446


6/170

http://www.flickr.com/photos/34233222@N05/4292987392

but what is the web

for?
http://www.flickr.com/photos/34233222@N05/4292987392http://www.flickr.com/photos/34233222@N05/4292987392


7/170

probably not surprisingly...I found the beginning of an

answer through this man...


8/170

...in 1980 Steve Jobs recountedthe following story...

afewyearsbeforetheMacintosh


9/170

in the early 70s, Scientific American

did a study on the efficiency of locomotion...

http://www.flickr.com/photos/boston_public_library/4328032194

it was actually the 1970s, not 1870s ;)
http://www.flickr.com/photos/boston_public_library/4328032194http://www.flickr.com/photos/boston_public_library/4328032194


10/170

...for all different species of things on the planet...birds, cats, dogs goats...


11/170

...they measured, how much energydoes it take for a goat to get from here to there...

A B


12/170

...they then ranked them, and published a list1. California Condor a lazy glider23. Domestic cat prefers to sleep32. British Alpine Goat

see goatsonstuff

.com18. Springer Spaniel prefers to swim27. Red-breasted Robin faster than most8. American Saddlebred -298. Banana Slug faster than a rock3. Cheetah currently missing

207. Humming Bird got tired watching it.- Bumble Bee couldnt find one183. Elephant forgot342. Bob not his finest moment


13/170

of all the animals, the condor won. It tookthe least amount of energy to get from here to there...

1. California Condor a lazy glider


14/170

342. Bob not his finest moment

man however didnt do so well...


15/170

man came a rather unimpressive showing...a third of the way down the list...

?


16/170

...but fortunately, someone was insightfulenough to test man on a bicycle...


17/170

and man with a bicycle won...

1. Bob on a bicycle one of his better days


18/170

...twice as good as the condor,all the way off the list..


19/170

...what it showed was that man as a tool maker,has the ability to create tools, to amplify

an inherent ability...


20/170

...and thats exactly what were doing here (Steve of course was talking about Apple, and the developmentof one of the first personal computers)

released 1984


21/170

Steve Jobs went on to explain that computers werejust one in a long line of tools created by man...


22/170

...just as the bicycle amplified our abilityto use our muscles, tendons and brains

to transport our bodies...


23/170

...just as the tools and technologiesof the industrial revolution were

an amplification of human sweat...


24/170

...the computer amplified our human abilitiesof memory, problem-solving, calculation,

projection, analysis, and so much more...

http://nicelifeapparel.wordpress.com/tag/crazy-math-problem/
http://nicelifeapparel.wordpress.com/tag/crazy-math-problem/http://nicelifeapparel.wordpress.com/tag/crazy-math-problem/


25/170

Steve Jobs also realizedthat the computer wasjust the beginning...


26/170

There is something veryspecial and historically

different that takes place,when you have onecomputer, for one person,rather than one for many.

- Steve Jobs

http://www.flickr.com/photos/aidanmorgan/3709199304/
http://www.flickr.com/photos/aidanmorgan/3709199304/http://www.flickr.com/photos/aidanmorgan/3709199304/


27/170

(as it happens) this statement isalso true of the Internet...


28/170

the Internets ability to amplify knowledgebegan as apurely academic and scientific tool...

http://www.flickr.com/photos/epitti/2371715992
http://www.flickr.com/photos/epitti/2371715992http://www.flickr.com/photos/epitti/2371715992


29/170

http://www.flickr.com/photos/olpc/2929782994

...but its true potential was only revealed whenit became a ubiquitously available tool...
http://www.flickr.com/photos/olpc/2929782994http://www.flickr.com/photos/olpc/2929782994


30/170

http://www.flickr.com/photos/goincase/4647893507

Nobody has any ideaof what a new inventionwill really be good for.

The crucial question is,what happens wheneveryone has one?

- Kevin Kelly
http://www.flickr.com/photos/goincase/4647893507http://www.nytimes.com/2010/09/19/magazine/19FOB-WWLN-Kelly-t.htmlhttp://www.nytimes.com/2010/09/19/magazine/19FOB-WWLN-Kelly-t.htmlhttp://www.flickr.com/photos/goincase/4647893507http://www.flickr.com/photos/goincase/4647893507


31/170

http://www.flickr.com/photos/tanaka/3212368979

...when we connected a browser to the Internet

we couldnt have guessed what it would become...

openanduniversallyaccessible
http://www.flickr.com/photos/tanaka/3212368979http://www.flickr.com/photos/tanaka/3212368979


32/170

...when we connected the Internetto a glowing rectangle, we thought we were

creating a smart phone...


33/170

but this is nota smartphone...


34/170

its"A device to

amplifycuriosity"

- John Seely Brown


35/170

...and while this doesnt really explain

what the web is for, it begins to clarifyits immense value to all of us...


36/170

being always connected to an open platform,

accessible by anyone with a browser,has forever changed the way we live...


37/170

http://www.flickr.com/photos/w00kie/2752309431

...hold on...let melook that up...I just happen to

have the sum ofhuman knowledgein my pocket...

- @
http://www.flickr.com/photos/w00kie/2752309431http://www.flickr.com/photos/w00kie/2752309431


38/170

http://www.flickr.com/photos/jonhurd/2367208101Source: Anthropology, development and ICTs

...the magic isin my palms,god knows what

I would dowithout this....Omar, 19, Hafeezpet, India
http://research.microsoft.com/en-us/um/people/cutrell/ICTD2012-Rangaswamy_Anthropologists_and__ICTD.pdfhttp://research.microsoft.com/en-us/um/people/cutrell/ICTD2012-Rangaswamy_Anthropologists_and__ICTD.pdfhttp://research.microsoft.com/en-us/um/people/cutrell/ICTD2012-Rangaswamy_Anthropologists_and__ICTD.pdfhttp://research.microsoft.com/en-us/um/people/cutrell/ICTD2012-Rangaswamy_Anthropologists_and__ICTD.pdfhttp://research.microsoft.com/en-us/um/people/cutrell/ICTD2012-Rangaswamy_Anthropologists_and__ICTD.pdfhttp://www.flickr.com/photos/jonhurd/2367208101http://www.flickr.com/photos/jonhurd/2367208101


39/170


not too shabby for

8000 days...
http://www.flickr.com/photos/psd/3149878971http://www.flickr.com/photos/psd/3149878971


40/170

But how did we really get here?


41/170

To understand this better, lets take a step back...


42/170

...and talk a bit

about plumbing.

http://www.flickr.com/photos/nnova/2923859643

Part 2: plumbing
http://www.flickr.com/photos/nnova/2923859643http://www.flickr.com/photos/nnova/2923859643


43/170

all technological revolutions

require a level of plumbing

orifyouprefer...infrastructure

http://www.flickr.com/photos/wheatfields/2110680492
http://www.flickr.com/photos/wheatfields/2110680492http://www.flickr.com/photos/wheatfields/2110680492


44/170

a common framework

or scaffold on which

plumbing provides

to innovate

Source: ToBeDetermined.org
http://www.tobedetermined.org/http://www.tobedetermined.org/http://www.tobedetermined.org/


45/170

the rise of computers, the Internet,the web and mobile have been intricately linked...


46/170

...to the invention, implementationand marketadoption of this type of plumbing...


47/170

0

100

200

300

400

500

600

700

800

900

50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12

millionsofInternethosts

hardware

chart: world Internet hosts, source: ISC - 1981-2012, other data primarily from Wikipedia

Transistorizedcomputersemerge.

Microprocessorintegrates CPU functiononto a single chip.

"Moore's Law" predicts thefuture of integrated circuits.

An all semiconductor"Solid Circuit" isdemonstrated byJack Kilby.

ARM6 processoris released.

Intel 32-bitPentiumprocessorreleased.Personal computers begin

to appear. Resistive touchscreens are patented.

rst 64-bit processorin a supercomputer

First 64-bitprocessor in apersonalcomputer.

Compaq, DEC,IBM,Intel, Microsoft, NECand Nortel beginwork on USB.

First human-input multi-touch

system.
http://www.isc.org/solutions/survey/historyhttp://www.isc.org/solutions/survey/historyhttp://www.isc.org/solutions/survey/history


48/170

0

100

200

300

400

500

600

700

800

900

50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12


network

First ARPANETlink established.

TCP/IP basedNSFNET

established.

NMT launches 1G

networks in Denmark,Finland, Norway andSweden.

NTT launchesrst (1G)cellularnetwork.

NTT DoCoMolaunches rstcommercial 3G

network in Japan.

NTT DoCoMointroduces the rstfull mobile Internetservice in Japan.

295 millionsubscribers on3G networksworldwide.

TCP/IP standardised,and Internet introduced.

First commercialdialup ISP in the U.S.

First GSM (2G)network launches inFinland. Wi-inventedby NCR/AT&T.

First person to

person SMSsent in Finland.

DNSinvented


First IPv6description.

Transition fromARPANET/NSFNETnetworks to themodern (commercial)

Internet.

9 companiedincluding IBM,Intel, Nokia andMicrosoft agreeto Bluetoothstandard.


49/170

0

100

200

300

400

500

600

700

800

900

50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12


the web

Facebooklaunches.

W3C founded.TBL makes the Web freelyavailable with no patents orroyalties. Launch of WebCrawler(rst full-text search engine).

Mosaic(rst graphicalbrowser)

YouTubelaunches.WAP &

CHTMLreleased

Wikipedialaunches.

XHTML MPreleased.

HTML 4.01recommended

HTML5workingdraft.

SGML

First JPG

standard.

Debut of the Web as apublicly availableservice on the Internet.

Compuserveintroduces theGIF format.

Tim Berners-Leebuilds all the toolsnecessary for aworking Web (HTTP,

HTML, a browserand server)

PNGformatapproved.

HTML2.0CSS

Start ofGoogleresearchproject.



50/170

with each layer of plumbing comes new innovations(which spawn or inspire more plumbing...)


51/170

0

100

200

300

400

500

600

700

800

900

50 55 60 65 70 75 80 85 90 91 93 93 94 95 96 97 98 99 00 01 02 03 04 05 06 07 08 10 11 12


product innovation

Apple Newtonplatformlaunched.

FirstBlackBerrysmartphone.

PalmPilot

FirstSymbiandevice.iMac

G3

First personto personSMS sent inFinland.

Symbian Ltd.formed byEricsson, Nokia,

Motorola & Psion

First RIMpager

First WebKitmobile browser(Nokia)

iPhone

iPad

Nokia E60260 ppi

display

iPhone 4330 ppidisplay

Palm

WebOS

MicrosoftWindowsrstannounced.

Nokia beginsmanufacturingtelecommunications

equipment.

MacintoshClassic

Windows95


The First Internet Router


52/170

The BBN Interface

Message Processor did

the packet routing for

the ARPANET in 1969,

http://www.flickr.com/photos/kiwanja/3169409467/
http://www.flickr.com/photos/jurvetson/5114191251http://www.flickr.com/photos/jurvetson/5114191251http://www.flickr.com/photos/jurvetson/5114191251


53/170

fall behind...

lack of infrastructure may

cause some to

during this time


54/170

...or sometimes

leap ahead

http://www.flickr.com/photos/kiwanja/3169409467/
http://www.flickr.com/photos/kiwanja/3169409467/http://www.flickr.com/photos/kiwanja/3169409467/http://www.flickr.com/photos/kiwanja/3169409467/


55/170

but the infrastructure of the web

(the common framework on whichwe continue to innovate...)


56/170

mental models

was based on

ofa very different time

http://www.flickr.com/photos/ona1a/4521406829/
http://www.flickr.com/photos/ona1a/4521406829/http://www.flickr.com/photos/ona1a/4521406829/http://www.flickr.com/photos/ona1a/4521406829/


57/170

InternetUsers(M

M)Estimated

0

500

1000

1500

2000

2007 2008 2009 2010 2011 2012 2013 2014 2015

Mobile users Desktop users

Source: Morgan Stanley Associates Internet Trends 2010 (PDF)

...models that may soon no longer apply

the inflection point is near...

within 2 years mobile usersare expected to exceeddesktop users
http://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdfhttp://www.morganstanley.com/institutional/techresearch/pdfs/Internet_Trends_041210.pdf


58/170

http://www.flickr.com/photos/whiteafrican/2938685296

Part 3: welcome to the future
http://http//www.flickr.com/photos/ona1a/4521406829/http://http//www.flickr.com/photos/ona1a/4521406829/


59/170

a short stroll into the future...

contexts willbe varied and

unpredictable

just in timewill replace

just in case

content will

(need to) flow

like water

everythingwill be

connected


60/170

and connected things

may feel incredibly diverse...

todays digital

http://www.flickr.com/photos/_dchris/4652995362
http://www.flickr.com/photos/_dchris/4652995362http://www.flickr.com/photos/_dchris/4652995362


61/170

...but they are still

deeply rooted to our past

http://www.flickr.com/photos/terry/538863066 8
http://www.flickr.com/photos/terry/5388630668http://www.flickr.com/photos/terry/5388630668http://www.flickr.com/photos/terry/5388630668


62/170

a small selection of near future devices

A random internet connected watch. More connected wearable devices are on the way.


63/170

tiny

personal

constrained

http://www.flickr.com/photos/scobleizer/526322379 8

large stationary
http://www.flickr.com/photos/scobleizer/5263223798http://www.flickr.com/photos/scobleizer/5263223798http://www.flickr.com/photos/scobleizer/5263223798


64/170

large stationary

public

(sweaty) touch

short use

Internet enabled treadmill. Currently considered a luxury product (...give it 18 months).

One of many Smart (internet enabled) TVs now shipping. Includes apps and a browser.


65/170

large

stationarysocial

lean-back powerful (enough)remote (voice, gesture, app)

Some can be paired with a smartphone or tablet remote control.

low-ish ppi

The new Tesla X with a internet-enabled touchscreen dashboard with apps and browser.


66/170

small touch, voice

fixed (but not stationary)

bandwidth constrained

Quantas A380 first class with 17 flat panel display.(Tethered tablets will likely appear soon)


67/170

(Tethered tablets will likely appear soon).

large(r) public

manipulation unknown

bandwidth constrained

fixed (but not stationary)

source: PC Mag
http://apcmag.com/inflight_internet_lives_again_qantas_introduces_wireless_broadband_laptop_power_in_all_classes.htmhttp://apcmag.com/inflight_internet_lives_again_qantas_introduces_wireless_broadband_laptop_power_in_all_classes.htmhttp://apcmag.com/inflight_internet_lives_again_qantas_introduces_wireless_broadband_laptop_power_in_all_classes.htm


68/170

many unknown unknowns

...a companion to smartphones, tablets, PC, Macs, and adds smartcapabilities to existing displays, TVs, set top boxes and other devices.

Cotton Candya Screen independent

but otherwise fully

functional USB sizedplug computer.

ARM Cortex A9, Wi-fi,Android, Ubuntu, withvirtualization client for

Win/Lin/Mac

http://www.fxitech.com/products/

The Magic CubeBluetooth
http://www.fxitech.com/products/http://www.fxitech.com/products/http://www.fxitech.com/products/


69/170

The Magic Cubeis an ultra-portable,full-sized virtual

computer keyboard

with support for Android,iOS and any devicewith Bluetooth HID

support.

helper-appliance

productivity

Shipping spring 2012 in EuropeLGs EPD is a 6-inch, 1024768 e-ink plastic screen. Its


70/170

LG s EPD is a 6 inch, 1024768 e ink plastic screen. It s0.7mm thick, it weighs 14g, and LG claims its resistantto scratches and drops from a 1.5 meter height.

small(-ish)

constrainedflexible


source: Green autoblog
http://green.autoblog.com/2011/03/17/elon-musk-tesla-model-s-third-party-apps/http://green.autoblog.com/2011/03/17/elon-musk-tesla-model-s-third-party-apps/http://green.autoblog.com/2011/03/17/elon-musk-tesla-model-s-third-party-apps/


71/170

We think technologyshould work for you

to be there when youneed it and get out ofyour way when you dont.

tiny

constrainedpersonal


voice, gesture?

Google Glass

Golden-i head-mounted mobile computer for industrial settings such as construction,military and security services Includes SVGA microdisplay Win CE and voice recognition


72/170

military, and security services. Includes SVGA microdisplay, Win-CE and voice recognition.

tiny

constrainedpersonal


voice, gesture

http://www.mygoldeni.com/
http://www.mygoldeni.com/http://www.mygoldeni.com/http://www.mygoldeni.com/


73/170

these contexts may be diverse,

but they still kinda fit our mental modelsfor both the original thing and the web

old


74/170

+

++connectivity

software

=

thing(or media,

or tool)

thing

smart

old thing

(just a bit smarter)

user interface


75/170

has been bolted on

the smart-ness

moreoftenthannot...

http://www.flickr.com/photos/mujitra/7053687599
http://www.flickr.com/photos/mujitra/7053687599http://www.flickr.com/photos/mujitra/7053687599http://www.flickr.com/photos/mujitra/7053687599


76/170

this likely wont be the pattern going forward,

heres why....


77/170


content will

(need to) flow

like water

contexts willbe varied and

unpredictable


just in case

everythingwill be

connected


78/170

Source: Intel

Moores Law is

close to 50 years old
http://www.intel.com/pressroom/kits/events/moores_law_40th/http://www.intel.com/pressroom/kits/events/moores_law_40th/http://www.intel.com/pressroom/kits/events/moores_law_40th/


79/170

Osborne Executive

1/100th MHz CPU1/1000th thememory100x the weight10x the cost

1982

Source and photo: Wikipedia

20071st gen.

iPhone

weve come

a very long way...
http://en.wikipedia.org/wiki/Moore's_law%23The_ensuing_speed_of_technological_changehttp://en.wikipedia.org/wiki/Moore's_law%23The_ensuing_speed_of_technological_change


80/170

it now costs almost

nothing to make

something smart

or connected...

http://www.flickr.com/photos/slgc/6286652858
http://www.flickr.com/photos/slgc/6286652858http://www.flickr.com/photos/slgc/6286652858http://www.flickr.com/photos/slgc/6286652858


81/170

the new ARMCortex-M0+ uses

of the energy of an8 or 16-bit processor1/3

Source: New ARM chips herald Internet of things
http://www.telegraph.co.uk/technology/news/9141299/New-Arm-chips-herald-Internet-of-things.htmlhttp://www.telegraph.co.uk/technology/news/9141299/New-Arm-chips-herald-Internet-of-things.htmlhttp://www.telegraph.co.uk/technology/news/9141299/New-Arm-chips-herald-Internet-of-things.html


82/170

it costs

30 cents(0.20)



83/170

...and measures

2 mm(0.07)



84/170

today: one chip that doesthe work of three

yesterday: multiple chips

Source: ThingM
http://www.slideshare.net/mikek/lean-hardware-startups-elements-of-a-ubiquitous-computing-innovation-ecosystemhttp://www.slideshare.net/mikek/lean-hardware-startups-elements-of-a-ubiquitous-computing-innovation-ecosystemhttp://www.slideshare.net/mikek/lean-hardware-startups-elements-of-a-ubiquitous-computing-innovation-ecosystem


85/170

some chips are optimized for

a specific unit of functionality

Source: ThingM

myjob is toconnect to

mobile phone

networks

myjob is toprovide GPScoordinates
http://www.slideshare.net/mikek/lean-hardware-startups-elements-of-a-ubiquitous-computing-innovation-ecosystemhttp://www.slideshare.net/mikek/lean-hardware-startups-elements-of-a-ubiquitous-computing-innovation-ecosystemhttp://www.slideshare.net/mikek/lean-hardware-startups-elements-of-a-ubiquitous-computing-innovation-ecosystemhttp://www.slideshare.net/mikek/lean-hardware-startups-elements-of-a-ubiquitous-computing-innovation-ecosystemhttp://www.slideshare.net/mikek/lean-hardware-startups-elements-of-a-ubiquitous-computing-innovation-ecosystem


86/170

+ = WTF?The Tweeting GeoLocationaware Toaster

Brad Frost

At airport gate ready tohead to @bdconf. Sadlythe large suction cups Iwas going to use toscale the biodome gotconfiscated. #bdconf

my job is toprovide GPScoordinates

my job is toconnect to the

Internet

bj t i t d h d


87/170

...functionality abstracted into silicon.

Source: ThingM

object oriented hardware...

- Mike Kuniavsky, ThingM

http://www.flickr.com/photos/negativz/41549347
http://www.flickr.com/photos/negativz/41549347http://www.flickr.com/photos/negativz/41549347http://www.flickr.com/photos/negativz/41549347http://www.flickr.com/photos/negativz/41549347http://www.slideshare.net/mikek/lean-hardware-startups-elements-of-a-ubiquitous-computing-innovation-ecosystemhttp://www.slideshare.net/mikek/lean-hardware-startups-elements-of-a-ubiquitous-computing-innovation-ecosystem


88/170

Source: The computer trend that will change everything and Bye-Bye Batteries: radio waves as a low-power source

Ambient radio waves...can already provide enough energyto substitute for AAA batteries in some calculators, temperatureand humidity sensors, and clocks....We are on the cusp of an explosion in small wirelessdevices...that can run on alternatives to battery power.Devices like this can live on and on.

soon...I may not evenneed batteries :-)
http://www.technologyreview.com/business/40016/?mod=chthumbhttp://www.nytimes.com/2010/07/18/business/18novel.htmlhttp://www.technologyreview.com/business/40016/?mod=chthumbhttp://www.nytimes.com/2010/07/18/business/18novel.htmlhttp://www.nytimes.com/2010/07/18/business/18novel.htmlhttp://www.technologyreview.com/business/40016/?mod=chthumbhttp://www.technologyreview.com/business/40016/?mod=chthumb


89/170

everything- Kevin Kelly, founding editor Wired

will be a sliver of webness

...embedded in

Cute circuit - wearable technology
http://www.cutecircuit.com/http://www.cutecircuit.com/http://www.cutecircuit.com/http://www.cutecircuit.com/


90/170

the more we peer into the future,

the more invisible this web-ness becomes


91/170


content will

(need to) flowlike water

contexts will

be varied and

unpredictable

just in time

will replace

just in case

everythingwill be

connected


92/170

mobile is dramatically

shifting web behaviour


93/170

we are accessing

the web at any time

and any place...

b t t b h i


94/170

but current behaviour

is still quite implicit

http://www.flickr.com/photos/intelfreepress/5922668169
http://www.flickr.com/photos/intelfreepress/5922668169http://www.flickr.com/photos/intelfreepress/5922668169


95/170

go to the computer

to use the web/Internet

open a browser (or app)to use the web/Internet

yesterday today


96/170

....and experiences are built accordingly

todays just in case web(because you never quite know what theyll need)


97/170

web site

products

corporate

jobs

investor

support

tools

PR

brand

shopping

socialinfotainment

news

information

todays just in case web + apps(now with added experience)


98/170

nativeapps

tool

infotainment

shopping

tool

Our apps offer the best experience...

(so please download, install and keep

them updated, just in case that timecomes...we promise you wont regret it)

web site

products

corporate

jobs

investor

support

tools

PR

brand

shopping

socialinfotainment

news

information

...but I dont want toown your app, I want


99/170

own your app, I wantto own the possibility

space of your app.

Paraphrased from Mike Kuniavsky @ Webdirections South http://www.flickr.com/photos/zenilorac/698514624

tomorrow's just in time web(because everything is connected)
http://www.webdirections.org/resources/mike-kuniavsky-design-inforand-the-age-of-ubiquitous-computing/http://www.webdirections.org/resources/mike-kuniavsky-design-inforand-the-age-of-ubiquitous-computing/http://www.flickr.com/photos/zenilorac/698514624http://www.flickr.com/photos/zenilorac/698514624http://www.webdirections.org/resources/mike-kuniavsky-design-inforand-the-age-of-ubiquitous-computing/http://www.webdirections.org/resources/mike-kuniavsky-design-inforand-the-age-of-ubiquitous-computing/


100/170

smart thing

tools

information

support

Like+

Id like to use whatever device I have

on-hand to learn more about this thing/tool/service/place (right here and rightnow)...please show me what I can do.

ld h d i l d


101/170

http://www.flickr.com/photos/keepwaddling1/3048726936/

...a world where our devices loadapplications opportunistically

as we need them, in real time.

The technological model for this...is web pages. But these will be webpages with advanced functionality that

can be accessed seamlessly fromremote or local networksand evenfrom other mobile devices.

- Scott Jenson on Forbes: Apps are over

does this mean
http://apps%20are%20over/http://apps%20are%20over/http://www.flickr.com/photos/keepwaddling1/3048726936/http://www.flickr.com/photos/keepwaddling1/3048726936/


102/170

OMG...

web sites will

does this mean

go away?

http://www.flickr.com/photos/richardmoross/1413692087
http://www.flickr.com/photos/zenilorac/698514624http://www.flickr.com/photos/zenilorac/698514624


103/170

no, probably not...


104/170

...web sites will be just one of many interfaces

we will use to interact with a service

the GlowCap service


105/170

A real-time web (or app)

based progress report is

available.

light

Each time the cap is opened,

data is transmitted

to the GlowCap service.

Data is also transmitted,

to trigger a reminder call

if you miss a dose.

The cap lights up,

and plays a sound each

time medication is due.

servicedata

out

Your pharmacy

is alerted when refills

are due.

Your doctoror designated

family member receives

regular progress emails.

Vitality GlowCaps

wirelessenabled

chip

data

out

data

out

data

out

datain
http://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.htmlhttp://www.vitality.net/index.html


106/170

http://www.flickr.com/photos/armaggeusa/3176297283

The most profound technologies are those thatdisappear. They weave themselves into the fabric ofeveryday life until they are indistinguishable from it.

- Mark Weiser (1991 chief scientist Xerox PARC)
http://nano.xerox.com/hypertext/weiser/SciAmDraft3.htmlhttp://nano.xerox.com/hypertext/weiser/SciAmDraft3.htmlhttp://www.flickr.com/photos/armaggeusa/3176297283http://www.flickr.com/photos/armaggeusa/3176297283


107/170


content will

(need to) flowlike water

contexts will

be varied and

unpredictable

just in time

will replace

just in case

everything

will beconnected


108/170

responsive design is reallyjust the beginning...

once we can envision this...


109/170


just in case

everythingwill be

connected

contexts will

be varied and

unpredictable

this no longer feels


110/170

this no longer feels

that strange...


111/170

http://www.flickr.com/photos/sackerman519/5045015997/

Get your content ready to go anywherebecause its going to go everywhere.- Brad Frost
http://www.flickr.com/photos/sackerman519/5045015997/http://www.flickr.com/photos/sackerman519/5045015997/


112/170

http://www.flickr.com/photos/evdaimon/165589586

but if content will be like water...

what kind of plumbing will we need?
http://www.flickr.com/photos/evdaimon/165589586http://www.flickr.com/photos/evdaimon/165589586


113/170

http://www.flickr.com/photos/jonasb/275111352 6

Part 4: re-imagining plumbing
http://www.flickr.com/photos/jonasb/2751113526http://www.flickr.com/photos/jonasb/2751113526http://www.flickr.com/photos/jonasb/2751113526


114/170

disclaimer: these ideas focus on a tiny sliver...

primarily related to the browser and the web platform


115/170

its easy to forget how much infrastructure

weve already built into the web as a platform


116/170

some of it wasnecessary structural

scaffolding

http://www.flickr.com/photos/dandeluca/2720139047

form elements - v.1HTML 4.01 - they havent failed us yet...
http://www.flickr.com/photos/dandeluca/2720139047http://www.flickr.com/photos/dandeluca/2720139047


117/170


118/170

some focussed on user productivity...

browser productivity features

f i icombined search/URL bar (and/ favourites


119/170

tabs

shortcuts &bookmarks

nd inbrowser

security signpostfavicon signpost

extensions

(or choice of search engine)

favourites

RSS

zoom (Operaversion shown)

back buon(added in 1993!)

status bar

access keys navigationfirst introduced in 1999 (and not specifically for mobile)


120/170

( p y )

1. Home

2. Products

3. Articles

Home.html

Products.html

Articles.html

Contact us


121/170

others were a response to change...

tel and SMS URI schemesintroduced around 2000 via WTAI


122/170

1. Home

2. Products

3. Articles

Contact us Contact Us

visual navigationaids on mobileNokia Browser for S60 circa 2005


123/170

MiniMap viewportpreview rectangle.

Once focussed,clicking the navipadwould zoom thelayout.

(Very similar to

Apples double-tapto zoom.)

Visual Back keypreview.

I really miss thisfeature! Muchclearer and didntforce you to reloadpages you didntwant to see again :-(

built-in reader modesReader lets you view web articles free of clutter.

were entirely tobl f thi bit


124/170

blame for this bit...

proxy web browserspolyfill for many of our existing problems


125/170

OperaMini2005

UCWeb2005

Amazon Silk - 2011Nokia Browserfor S40 - 2011

on-the-fly user agent switchingmost browsers now include this feature

were somewhat to blamefor this bit as well


126/170

for this bit as well...

Maxthon browser for AndroidDolphin browser for Android

Abandon hope all ye

who enter here


127/170

recent specifications

continue to bake-in common functionality...


128/170

...offloading aspects of behaviour

and rendering to the browser/platform

form elements - v.2cleaner markup thanks to out of the box functionality


129/170

validation

placeholder

HTML5 notifications APIout of the box components and behaviours


130/170


131/170

end result: intelligent, responsive, platform-appropriate

yet adaptabledefault components...


132/170

end result: intelligent, responsive, platform-appropriate

yet adaptabledefault components...

a robust set ofbehaviours isalready baked-in

responsiveness isbaked in by default

lower-level platform accessimproves the user experience

future-friendly(and gracefullydegradable)

aspects arestyleable andaddressable throughthe built-in API


133/170

the loss of control is generally welcome

compared to the alternative...

a menu and header in abox with rounded cornersbefore CSS3 & HTML5


134/170

look ma...no divs (and semantics!)...and after

form placeholders before HTML5lots of potential issues

cross browser support for entirebehaviour (e.g. populate the field

h l i f )


135/170

after CSS3and HTML5

and so on...

then clear it on focus)

accessibility of placeholder value 4kb uncompressed (not huge..but

adds up with each new element offunctionality you build in)

requires maintenance and testingfor each new browsers/versions/

form factors and manipulation

models (touch, voice etc.)

...everything you addto the page is something youretaking away from the latency profile of that page


136/170

Alex Russell speaking at London JS

...everything you addjust as infrastructure

to make things workall thesethings have a cost.

Tilt 3D add-on for Firefox

- Alex Russell
http://www.vitality.net/index.htmlhttps://addons.mozilla.org/en-US/firefox/addon/tilt/https://addons.mozilla.org/en-US/firefox/addon/tilt/http://www.vitality.net/index.htmlhttp://www.vitality.net/index.html


137/170

in the future, it may make sense to take these

approaches approach even further...


138/170

a few ideas...(warning: ideas presented in order of potential

disruption to the status quo)


139/170

Problem: Back to top links are useful to

improve usability of longer pages.

Thanks to viewport diversity, long is a variable value.

Sprinkling hard-coded anchors throughout contentisnt future friendly.

Adding them dynamically (on the client or server) basedon context detection seems like needless heavy lifting.

ive seen this done...it works wellenough but isnt a long-term strategy

idea #1

vertical navigation


140/170

In QQs implementation,a tap scrolls the layout up or

down by a (random) increment.

Scrolling is accelerated

to improve the experience. Can be disabled by the user. Should ideally be customizable.

e.g. option to instead map controls

to a full page-up/down behaviour.

A nice companion to Applestap to reveal URL bar gesture.

sample implementation

on Tencents QQ browser (iOS)

darkened for

demonstrationpurposes

shortcuts


141/170

Problem: On the web, social media sharing

and discovery is currently enabled client-side,

using lots of third party scripts.

Scripts may not be compatible with all browsers. Interactions are rarely responsive to changes in context. Social widgets (often) cause lots of HTTP requests and

have been known to block page load.

The more popular social media gets, the more widgets

we will (technically) need.

idea #2

th l i t d


142/170

they also introduce

a fair bit of noise :-(its not like we donthave a bit too muchnoise already...

studies suggestsocial networks

now reach close to


143/170

Source: Social networks around the world 2010

now reach close to

of the worldwidepopulation

to go away...

but are also unlikely
http://www.slideshare.net/stevenvanbelleghem/social-networks-around-the-world-2010http://www.slideshare.net/stevenvanbelleghem/social-networks-around-the-world-2010http://www.slideshare.net/stevenvanbelleghem/social-networks-around-the-world-2010


144/170

Social media is alreadyweaving its way through

mobile platforms.

Functionality is currentlylimited to glanceablehome screen widgets, and

easy in-browser sharing.

but social widgets


145/170

arent content,

nor are they really

g

chrome...


146/170

http://www.flickr.com/photos/preetamrai/5454799225

which means they

may just be...plumbing

Mobile is the needle,

social is the thread...- Pew Internet &

American Life Project

bake-in a

userconfigurable
http://www.flickr.com/photos/preetamrai/5454799225http://www.flickr.com/photos/preetamrai/5454799225http://www.flickr.com/photos/preetamrai/5454799225http://www.flickr.com/photos/preetamrai/5454799225


147/170

social sharing layer

(loose and clunky attempt at

visualizing how this might work)

id #3


148/170

Problem: There are only so many ways

to re-arrange complex navigation.

there will be many, devices of all shapes, sizes,capabilities and manipulation models

we can only simplify sites so much...some willremain big, with a complex multi-level

architecture

idea #3

if we offloaded

what would happen


149/170

top-level navigationApple Gives Share-holders More Input;Will Facebook Get theMessage?

At its annual shareholders meet-ing on Thursday, Apples man-

agement bowed to pressurefrom key investors and agreed toallow shareholders to electboard directors by a simple ma-

jority vote.

Now any new or current directorstanding for election who fails toreceive support from a majorityof shareholders must resign his

By Tim Carmody

February 24, 2012 | 4:26 pm

MENU

if we offloaded

a content firstapproach to top-levelnavigation...

to the browser?

wired.co.uks


150/170

56 item top level navigation

whichadmittedlycoulduseatrim


151/170

Apple Gives Share-holders More Input;Will Facebook Get theMessage?

At its annual shareholders meet-ing on Thursday, Apples man-agement bowed to pressure

from key investors and agreed toallow shareholders to electboard directors by a simple ma-jority vote.


By Tim Carmody

February 24, 2012 | 4:26 pm

MENU

Apple Gives Sharholders More InpWill Facebook GeMessage?

At its annual shareholdering on Thursday, Applesagement bowed to press

from key investors and aallow shareholders to eleboard directors by a simpjority vote.

Now any new or currentstanding for election whoreceive support from a mof shareholders must resi

By Tim Carmody

February 24, 2012 | 4:26 pm

Home

News

Reviews

Photos

Video

Magazine

Podcast

Topics

ApplholdWillMes

At its ameetinAppleto prestors an

sharehdirectoity vot

Now adirectowho fafrom aholder

By Tim C

February

Home

News

Reviews

Mobile Phones

Tablets

Gadgets

Cameras & Camcorders

Laptops

TV and Home

ApplholdWillMes

At its ameetinAppleto prestors an

sharehdirectoity vot

Now adirectowho fafrom aholder

By Tim C

February

Home

News

Reviews

huh...?


152/170

Ive seen

that look...

http://www.flickr.com/photos/eldret_99/3311540632

what?
http://www.flickr.com/photos/eldret_99/3311540632http://www.flickr.com/photos/eldret_99/3311540632http://www.flickr.com/photos/eldret_99/3311540632http://www.flickr.com/photos/eldret_99/3311540632


153/170

HomeNews

Reviews





By Tim Carmody

February 24, 2012 | 4:26 pm

MENU


154/170





By Tim Carmody

February 24, 2012 | 4:26 pm

MENU




Now any new or currentstanding for election whreceive support from a mof shareholders must resi

By Tim Carmody

February 24, 2012 | 4:26 pm

Native performance andresponsiveness (GPU acceleration etc.)

Device appropriate transition

(or not...entirely dependant on devicecapabilities)

User gets the most appropriateexperience for their device.


155/170





By Tim Carmody

February 24, 2012 | 4:26 pm

MENU





By Tim Carmody

February 24, 2012 | 4:26 pm

Home

News

Reviews

Photos

Video

Magazine

Podcast

Topics

ApplholdWillMes

At its ameetinAppleto pretors an

sharehdirectity vot

Now adirectwho fafrom aholder

By Tim

February

Menu can (in theory)be as long or complex

as needed.

Native platform assistsin management of drill

down or progressive

disclosure.


156/170





By Tim Carmody

February 24, 2012 | 4:26 pm

MENU





By Tim Carmody

February 24, 2012 | 4:26 pm

Home

News

Reviews

Photos

Video

Magazine

Podcast

Topics

ApplholdWillMes


sharehdirectity vot


By Tim

February

Home

News

Reviews

Mobile Phones

Tablets

Gadgets

Cameras & Camcorders

Laptops

TV and Home

ApplholdWillMes


sharehdirectity vot


By Tim

February

Home

News

Reviews

in theory...it wouldnt matter what device youre using...


157/170

Home

News

Reviews

Photos

Video

Magazine

Podcast

Topics

ApplholdWillMess

At its ameetinApplesto prestors ansharehdirectoity vote.

Now adirectowho faifrom aholders

By Tim C

February :

MENU

Home

News

Reviews

Photos

Home

News

ReviewsPhotos

it would also fit in nicely


158/170

CSS Pagination Template Module

with the basicpremise

it would also fit in nicely

around this
http://dev.w3.org/csswg/css3-page-template/http://dev.w3.org/csswg/css3-page-template/http://dev.w3.org/csswg/css3-page-template/


159/170

and maybe even this

Web Components Explained

idea #4
http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.htmlhttp://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.htmlhttp://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html


160/170

Problem: Our media formats arentadaptive enough

An image or media item that is suitable for onecontext may not be for another.

Many parameters will determine which media itemyou serve. These are the ones we know of TODAY.

screen and/or viewport size pixel density support-level for the media format

available bandwidth user choice

idea #4

why do we keep ignoring this bit?

the current (early) proposal


161/170

proposed new picture element

modelled after the video element

media query enables more

control over criteria

media query supporthere is still poor

parameters could eventually beextended for added context e.g.connection speed

fallback image whenunsupported

Source: Responsive images- how they almost worked and what we need
http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/http://dev.opera.com/articles/view/love-your-devices-adaptive-web-design-with-media-queries-viewport-and-more/


162/170

will anew (much smarter) element be enough

given all the diversity that is on the way?


163/170

why not a new, and natively adaptiveimage media container format?

Hat tip to Christopher Schmitt

with built in

example wired media container formatApple circa 2000
http://www.christopherschmitt.com/2012/04/04/the-need-for-a-responsive-web-image-format/http://www.christopherschmitt.com/2012/04/04/the-need-for-a-responsive-web-image-format/http://www.christopherschmitt.com/2012/04/04/the-need-for-a-responsive-web-image-format/


164/170

Sorry...no links - this is all out of @bryanriegers head from back in 2000

package contains

references to content

(of almost any fileformat) on server/CDN

highly compressedinitial download

2-20kb

Hi-rez50MB Mid-rez

20MB

Low-rez A1MB

Low-rez B1MB

Built-in content negotiation. Default negotiation based on

connection speed but could also be

triggered by the developer (using the

wired media API).

Optional, out-of-the-box nativecomponent and behaviour to prompt

user for connection speed

e.g. 28.8, 56, ISDN (how retro!)

poster

image

with built inprogress meter

QuickTime reference movies

pleasedontbedistractedbythewordmovie

Combine a smarter image format with some upcoming CSS specification drafts(and experiments) and we can begin to imagine truly responsive media combining

content negotiation with sophisticated client-side adaptation


165/170

CSS ShadersAdobe, Apple, Opera: Editors Draft

image compositingwith CSS blend modes

Adobe - early concept

CSS Exclusions & ShapesAdobe, Microsoft: Editors Draft 2

an image with grayscale pixelshader applied

a list element (e.g. ul, li)wrapped in a vertex shader

Adobe web platform blog and CSS bleeding edge features
http://blogs.adobe.com/webplatformhttp://corlan.org/2012/03/16/css-bleeding-edge-features/http://blogs.adobe.com/webplatformhttp://corlan.org/2012/03/16/css-bleeding-edge-features/http://blogs.adobe.com/webplatformhttp://corlan.org/2012/03/16/css-bleeding-edge-features/http://corlan.org/2012/03/16/css-bleeding-edge-features/http://corlan.org/2012/03/16/css-bleeding-edge-features/http://blogs.adobe.com/webplatformhttp://blogs.adobe.com/webplatform


166/170

these are of coursejust ideas....

the reality is, we have


167/170

no idea what willhappen next...

(when I was a kid, they kept telling us wewould have jetpacks by now...)

http://www.flickr.com/photos/jurvetson/302869583

Technological revolutions haveseveral interesting properties.First, we tend to overestimate
http://www.flickr.com/photos/jurvetson/302869583http://www.flickr.com/photos/jurvetson/302869583http://www.flickr.com/photos/jurvetson/302869583http://www.flickr.com/photos/jurvetson/302869583


168/170

http://www.flickr.com/photos/jordanfischer/61429449

the immediate impact and

underestimate the long-termimpact.

Second, we tend to place theemphasis on the technologies

themselves, when it is really thesocial impact and cultural change

that will be most dramatic.

Don Norman, Drop everything youre doing

The future is a process, not a destination.

- Bruce Sterling
http://www.flickr.com/photos/jordanfischer/61429449http://www.flickr.com/photos/jordanfischer/61429449


169/170


heres to the next

8000 days!

Bruce Sterling

@yiibu

contactus
http://www.flickr.com/photos/psd/3149878971http://www.flickr.com/photos/psd/3149878971http://www.flickr.com/photos/psd/3149878971mailto:[email protected]:[email protected]:[email protected]


170/170

[email protected] thank you

manythankstotheamazingphotographerson

http://creativecommons.org/licenses/by/2.0

at

http://www.slideshare.net/yiibu/reset-the-web
http://www.slideshare.net/yiibu/reset-the-webhttp://www.slideshare.net/yiibu/reset-the-webmailto:[email protected]:[email protected]

Reset The Web • Yiibu

Documents

Transcript of Reset The Web • Yiibu