Presentation The State of the Web

The State of the Web keynote

Speakers


Slides

Intro

State of the Web

State of the Web Ben Galbraith (@bgalbs) and Dion Almaer (@dalmaer)

HTML5 quote

With HTML5, you can make as rich an experience as an app

HTML5 quote 2

HTML5 is a beautiful thing. You get lost in the experience and forget that you are on the Web.

HTML5 quotes

With HTML5, you can make as rich an experience as an app HTML5 is a beautiful thing. You get lost in the experience and forget that you are on the Web. HTML5 makes desktop operating system SDKs obsolete. You no longer need to develop a Windows app. ?

HTML5 / Internet Explorer 9

HTML5 makes desktop operating system SDKs obsolete. You no longer need to develop a Windows app.

Beauty of the Web

Microsoft HTML5 Demo

Microsoft HTML5 Demo

Microsoft HTML5 Demo

Microsoft HTML5 Demo

Microsoft

Silverlight

Windows 98

Wired

Apple

Yahoo

Google

Jim Clark

Ironically, if Microsoft had focused on how to leverage the [web], rather than how to kill it, they might be in Google s position today. Serves them right. ‒ Jim Clark Founder, Netscape

Microsoft

OS X Cocoa

OS X Cocoa Adobe Flex

Jesse James Garrett

Google Suggest and Google Maps are two examples of a new approach to web applications that we at Adaptive Path have been calling Ajax. The name is shorthand for Asynchronous JavaScript + XML, and it represents a fundamental shift in what s possible on the Web. ‒ Jesse James Garrett Co-founder, Adaptive Path

Before and after Ajax

Before Ajax (2000-2005): After Ajax (2006):

Yahoo

Apple

Disney

Google

Calender

Calender

Smashing

TechCrunch

Silverlight

IE7. IE8.

IE7. IE8.

WHATWG

WHATWG

Image

Mobile Apps

10,000 Mobile Apps

Mobile Apps

15,000 Mobile Apps

Mobile Apps

325,000 Mobile Apps

amazon.com

Today's announcement is a call to serious writers, thinkers, scientists, business leaders, historians, politicians and publishers... To be considered for Kindle Singles, interested parties should contact [Amazon.com]. ‒ Amazon.com Website Kindle Singles Press Release

Mobile App Economy

$3,000,000,000 Mobile App Economy BEN and DION s ESTIMATE BASED ON PUBLICLY RELEASED FIGURES

Mobile App Economy

size of app economy what do I think of myself expected $ on my fart app $3,000,000,000 ninja = $1,000,000 h!!! e ric nna b m go I’

Mobile App Economy

size of app economy approx. number of apps average earnings per app $3,000,000,000 / 350,000 = $8,571 $30,000 average cost to develop an app return on investment -$21,429 ren’t rs a ey! elope mon Dev ing mak

Apps are content

Apps are content. Content production is a hits business. That s just how it works.

Popularity

Popularity Hits Everything else Products The Long Tail

Apps are content

Apps are content.

Apple apps

20% of Apple s apps have a daily audience of more than 19 million people who spend over 22 minutes per day using them. Treated as a consumer audience, its size and reach rank somewhere between NBC s Sunday Night Football and ABC s Dancing with the Stars, and only 4 million viewers shy from beating the number one prime-time show on television, FOX s American Idol. ‒ Flurry Blog October 11, 2010

OmniFocus for iPad $39

OmniFocus for iPad $39 To Do s List for iPad Free ($0.99 optional donation)

Windows 7

Starting today, customers... can purchase the Windows 7 Family Pack... online at the Microsoft Store... But act fast̶ Family Pack is only available while supplies last. ‒ Windows Experience Blog October 3, 2010

Image

Apps

Web App

Web App Mobile App

Twitter

Twitter

Twitter

Twitter

Flipboard

Flipboard

Palm

We didn t buy Palm [just to] be in the smartphone business. ‒ Marc Hurd Former HP CEO

IE 9

Bill Hewlett

Don t try to take a fortified hill, especially if the army on top is bigger than your own. ‒ Bill Hewlett

Microsoft Me

Price Umbrella

One thing we'll make sure is that we don't leave a price umbrella for people. ‒ Tim Cook Apple COO

Netscape

craigslist

craigslist

Mozilla

App Ecosystem

J2ME

J2ME This is exciting times for developers, and the emergence of a Java gaming industry ‒ JavaOne, 2000 Platform Distribution Merchandising Experience Platform Capabilities

Quote

The secret of mass marketing of software is having a very large and extremely uniform hardware/software base. ‒ Jef Raskin Author, The Human Interface Instigator of the Apple Macintosh project

State of the Web

State of the Web Platform Distribution Merchandising Experience Platform Capabilities

Over 1,500,000,000 Browsers

Over 1,500,000,000 Browsers

Browsers

(PROPORTIONS BASED ON NET APPLICATIONS DATA AS OF NOVEMBER 2010) Over 1,500,000,000 Browsers

Html5 Browsers

(CHART NOT ACTUALLY BASED ON REAL DATA) IE6 (90%) Google Chrome Frame HTML5 Browsers (10%)

HTML5 video

H.264

H.264 Flash and Mobile Video

Flash

Html5

Html5

Po w er ed by W eb 2. 0! HTML5

What is HTML5?

What is HTML5? CSS3 WebGL / O3D Geolocation Web Workers Web Storage WebSocket Server-sent Events SVG MathML Fast JavaScript

The W3C / WHATWG HTML5 Specification

The W3C / WHATWG HTML5 Specification > HTML 4.01

The Web needs an app platform standard.

The Web needs an app platform standard.

State of the Web

State of the Web Platform Distribution Merchandising Experience Platform Capabilities

Untitled

Untitled

Untitled

Untitled

Untitled

!

! !

The Web needs app marketplaces.

The Web needs app marketplaces. (Come back, Yahoo! All is forgiven...)

Chrome Web Store

Chrome Web Store Mozilla Open Web App Store

The Web needs a launcher experience.

The Web needs a launcher experience.

State of the Web

State of the Web Platform Distribution Merchandising Experience Platform Capabilities

Browser Wishlist

Browsers

Untitled

Tab Awesome Are we Bar Candy fast yet?

Tab Awesome Are we Bar Candy fast yet? World’s Pin One Box FASTEST Tabs Browser* 3D World’s Simple Wall of FASTEST UI! Websites Browser* Unibox FASTEST Sites Browser* World’s Pin Firefox 4 Chrome 7.0.517.8dev Safari 4 IE9

Untitled

Canvas

Canvas CSS3

Four GPU-accelerated APIs:

Four GPU-accelerated APIs: Canvas + SVG: 2D graphics CSS3: DOM acceleration WebGL: 3D graphics

Typo

width

The Web needs deeper APIs and richer app frameworks.

The Web needs deeper APIs and richer app frameworks.

JavaScript?

JavaScript?

palm

The Web needs a permissions model.

The Web needs a permissions model.

State of the Web

State of the Web Platform Distribution Merchandising Experience Platform Capabilities

Palm HTC RIM

Palm HTC RIM Nokia Samsung LG Apple Motorola

Sproutcore

Sproutcore

• • • • client-oriented architecture app cache / local storage gradients and text shadows CSS transitions, transforms, and animations

@media only screen and (max-width: 480px) { ... }

#home { position: absolute; bottom: 0; left: 220px; width: 185px; height: 91px; -webkit-transform: translateY(92px); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 400ms; } #home.on { -webkit-transform: translateY(0px); } // turn classes on or off to control transforms $("#home").addClass("on"); document.body.addClassName("home-visible"); body.home-visible #home {}

/* set background gradient */ background-image: -webkit-gradient (linear, left top, left bottom, from(blue), to(white)); /* nice fonts! */ @font-face { font-family: "Delta"; src: url("Delta.svg"); } /* rounded corners web2.0 style! */ border-radius: 20px; -webkit-box-shadow: 0 0 1em 0.5em grey;

JQTouch

var win1 = Titanium.UI.createWindow({ url:'main_windows/base_ui.js', titleImage:'images/appcelerator_small.png' }); var tab1 = Titanium.UI.createTab({ icon:'images/tabs/KS_nav_views.png', title:'Base UI', window:win1 }); tabGroup.addEventListener('open',function() { // set background color back to white after tab group transition Titanium.UI.setBackgroundColor('#fff'); }); // tab group close event tabGroup.addEventListener('close', function(e) { messageLabel.text = 'tab group close event'; messageWin.open(); setTimeout(function() { messageWin.close({opacity:0,duration:500}); tabGroup.open(); },1000); });

Thank you.

Thank you. Dion Almaer @dalmaer Ben Galbraith @bgalbs