State of the Open Web. Brad Neuberg, Google

Size: px

Start display at page:

Download "State of the Open Web. Brad Neuberg, Google"

Amber Barrett
6 years ago
Views:

1 State of the Open Web Brad Neuberg, Google

3 Who is this guy? Ajax Image CC: jopemoro/flickr

4 Who is this guy? Ajax Image CC: jopemoro/flickr

5 Ajax Who is this guy? Ajax Image CC: jopemoro/flickr

6 Ajax Gears Who is this guy? Ajax Image CC: jopemoro/flickr

7 Ajax Coworking Gears Who is this guy? Ajax Image CC: jopemoro/flickr

8 Ajax Coworking Gears Open Web Who is this guy? Ajax Image CC: jopemoro/flickr

14 What is the Open Web?

15 1 Cross-Platform Standards

16 2 Open Source Implementations

17 3 No Vendor Lock-In

18 4 Anyone Can Innovate

19 5 Universal Powerful Clients

20 *

21 *Mashable

22 *Mashable Searchable

23 *Mashable Searchable Integrated

24 Why Should You Care?

25 Why Should You Care? Idealist

26 Why Should You Care? Pragmatist Idealist

27 Why Should You Care? Pragmatist Idealist

28 Why Should You Care? Pragmatist Idealist

29 Why Google?

30 Google s Motivation

31 Google s Motivation More users on the web & Better web browsers

32 Google s Motivation More users on the web & Better web browsers Searching Advertisements Better Applications

33 Google s Motivation More users on the web & Better web browsers Searching Advertisements Better Applications $

34 Google s Motivation More users on the web & Better web browsers Searching Advertisements Better Applications

38 Chrome

39 Chrome

40 Chrome

41 Open Web Chrome

42 Agenda

43 Agenda Introduction

44 Agenda Introduction

45 Agenda Introduction

46 Agenda Introduction

47 Agenda Introduction

48 Vector Graphics

49 Vector Graphics Vector Graphics Mathematical equations

50 Vector Graphics Vector Graphics Mathematical equations Raster Graphics (GIF, JPG, PNG) Array of pixels

51 Vector Graphics Vector Graphics Mathematical equations Raster Graphics (GIF, JPG, PNG) Array of pixels

52 Vector Graphics Canvas Tag Scalable Vector Graphics (SVG)

53 Canvas

54 Canvas HTML Tag + API for drawing

57 Canvas Example <canvas id= mycanvas ></canvas> var canvas = document.getelementbyid ("canvas"); var ctx = canvas.getcontext("2d"); ctx.fillstyle = "rgb(200,0,0)"; ctx.fillrect(10, 10, 55, 50);

58 Canvas Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Yes Yes Yes Almost 1 Almost 1 Yes Yes

59 Canvas Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Yes Yes Yes Almost 1 Almost 1 Yes Yes 1 IE: Requires JavaScript shim; performance issues

60 Canvas Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Yes Yes Yes Almost 1 Almost 1 Yes Yes READY 1 IE: Requires JavaScript shim; performance issues

61 Canvas Shims ExplorerCanvas Canvas for Internet Explorer Created by Emil Eklund and Google Open source Uses VML Be careful with performance

62 SVG

63 SVG Markup language for graphics

66 SVG Example <svg xmlns=" version="1.1"> <rect width="60" height="60" x="0" y="0" stroke-fill="green"/> </svg>

67 SVG Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost Almost Almost No No Almost Almost 1

68 SVG Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost Almost Almost No No Almost Almost 1 1 iphone: SVG Support arrived in iphone version 2.1

69 SVG Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost Almost Almost No No Almost Almost 1 NOT READY 1 iphone: SVG Support arrived in iphone version 2.1

70 SVG Shims None yet JavaScript shim being developed for Internet Explorer Adobe SVG Viewer discontinued

73 SVG Vs. Canvas Need both! Canvas Immediate-mode API SVG Retained mode

74 Ajax History/Bookmarking

75 Ajax History/Bookmarking Bookmark Ajax applications Respond to back/forward buttons

78 Ajax History/Bookmarking Example <body onhashchange="update()"> function update() { alert('the new location is: ' + location.hash); }

79 Ajax History/Bookmarking Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost 1 Almost 1 Almost 1 Almost 1 Yes 2 Almost 1 Almost 1

80 Ajax History/Bookmarking Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost 1 Almost 1 Almost 1 Almost 1 Yes 2 Almost 1 Almost 1 1 Requires JavaScript shim; not HTML 5 API

81 Ajax History/Bookmarking Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost 1 Almost 1 Almost 1 Almost 1 Yes 2 Almost 1 Almost 1 1 Requires JavaScript shim; not HTML 5 API 2 Implements HTML 5 History API

82 Ajax History/Bookmarking Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost 1 Almost 1 Almost 1 Almost 1 Yes 2 Almost 1 Almost 1 READY 1 Requires JavaScript shim; not HTML 5 API 2 Implements HTML 5 History API

83 Ajax History/Bookmarking Shims dshistory YUI Browser History Manager Really Simple History

84 JavaScript Toolkits

86 How to Choose an Ajax Framework XHR

87 How to Choose an Ajax Framework XHR

88 How to Choose an Ajax Framework

89 The Old Taxonomy

90 The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers

91 The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java.

92 The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java. jquery New, DOM-centric JavaScript helper

93 The Old Taxonomy dojo Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java. Your Soup-to-Nuts Ajax/Javascript Platform jquery New, DOM-centric JavaScript helper

94 The New Taxonomy

95 The New Taxonomy Prototype jquery Dojo Core

96 The New Taxonomy Plug-in Community scripteka.com Plug-in Community plugins.jquery.com Plug-in Community dojox Prototype jquery Dojo Core

97 The New Taxonomy Script.aculo.us jquery UI dijit Plug-in Community scripteka.com Plug-in Community plugins.jquery.com Plug-in Community dojox Prototype jquery Dojo Core

98 The New Taxonomy READY Script.aculo.us jquery UI dijit Plug-in Community scripteka.com Plug-in Community plugins.jquery.com Plug-in Community dojox Prototype jquery Dojo Core

99 Web Fonts Advanced typography for the web

100

101

102 Web Fonts Pretty fragmented Embedded Open Type (EOT) Internet Explorer TrueType Fonts Safari 3.1 SVG Fonts Safari 3, Firefox 3.1

103 Web Fonts Example font-family: "Kimberley"; src: url(kimberle.ttf) format("truetype"); } h1 { font-family: "Kimberley", sans-serif }

104 Web Fonts Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost 1 Almost 1 Yes 2 Almost 1,3 Almost 1,3 Almost 1 No 1

105 Web Fonts Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost 1 Almost 1 Yes 2 Almost 1,3 Almost 1,3 Almost 1 No 1 1Requires JavaScript shim (Dojo GFX Fonts)

106 Web Fonts Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost 1 Almost 1 Yes 2 Almost 1,3 Almost 1,3 Almost 1 No 1 1Requires JavaScript shim (Dojo GFX Fonts) 2Safari 3.1: Supports TTF and SVG Fonts

107 Web Fonts Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost 1 Almost 1 Yes 2 Almost 1,3 Almost 1,3 Almost 1 No 1 1Requires JavaScript shim (Dojo GFX Fonts) 2Safari 3.1: Supports TTF and SVG Fonts 3IE: Supports EOT; Shim can be glitchy

108 Web Fonts Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone Almost 1 Almost 1 Yes 2 Almost 1,3 Almost 1,3 Almost 1 No 1 1Requires JavaScript shim (Dojo GFX Fonts) 2Safari 3.1: Supports TTF and SVG Fonts 3IE: Supports EOT; Shim can be glitchy ALMOST

109 Web Fonts Shims Dojo GFX Fonts sifr Scalable_Inman_Flash_Replacement

110

111

112 CSS CSS Animations, Reflections, and Masks CSS 2.1 Selectors Content/Counters CSS 3 Selectors Multicolumn layout

113

114

115

116 CSS 2.1 Example <div myattr= hello ></div> [myattr =hello] { background-color: blue; }

117 CSS Report Card CSS Effects CSS 3 CSS 2.1

118 CSS Report Card 1 CSS Effects NOT READY CSS 3 CSS 2.1

119 CSS Report Card 1 CSS Effects NOT READY CSS 3 CSS 2.1 1Safari 3 only (some in Firefox 3.1)

120 CSS Report Card 1 CSS Effects NOT READY 2 CSS 3 CSS 2.1 READY 1Safari 3 only (some in Firefox 3.1)

121 CSS Report Card 1 CSS Effects NOT READY 2 CSS 3 CSS 2.1 READY 1Safari 3 only (some in Firefox 3.1) 2IE 8 > IE 7 > IE 6

122 CSS Report Card 1 3 CSS Effects NOT READY 2 CSS 3 NOT READY CSS 2.1 READY 1Safari 3 only (some in Firefox 3.1) 2IE 8 > IE 7 > IE 6

123 CSS Report Card 1 3 CSS Effects NOT READY 2 CSS 3 NOT READY CSS 2.1 READY 1Safari 3 only (some in Firefox 3.1) 2IE 8 > IE 7 > IE 6 3Some support in Safari 3 and Firefox 3/3.1, a little in IE 8

124 HTML 5

125 HTML 5 Next revision of HTML

126 HTML 5 Next revision of HTML Two parts

127 HTML 5 Next revision of HTML Two parts Document how web currently works

128 HTML 5 Next revision of HTML Two parts Document how web currently works New features

129 HTML 5 New Modules Drawing Client-Side Storage Offline Editing Drag and drop Messaging/Networking...And a Pony!

130 HTML 5 New Modules Drawing Client-Side Storage Offline Editing NOT READY Drag and drop Messaging/Networking...And a Pony!

131 XML Web Integrated set of technologies based on XML Runs in the browser

132 XML Web Report Card

133 XML Web Report Card XML

134 XML Web Report Card XML READY

135 XML Web Report Card XML READY XSLT

136 XML Web Report Card XML READY XSLT READY

137 XML Web Report Card XML READY XSLT READY XPath

138 XML Web Report Card XML READY XSLT READY XPath READY

139 XML Web Report Card XML READY CSS/XML XSLT READY XPath READY

140 XML Web Report Card XML READY CSS/XML ALMOST XSLT READY XPath READY

141 XML Web Report Card XML READY CSS/XML ALMOST XSLT READY XHTML XPath READY

142 XML Web Report Card XML READY CSS/XML ALMOST XSLT READY XHTML NOT READY XPath READY

143 Video on the Web

144 Video on the Web HTML tag to drop videos into your web page

145

146 Video on the Web Example <video src='mymovie' id='vid' /> var vid = document.getelementbyid("vid"); vid.play(); vid.pause(); vid.stop(); vid.muted = true; vid.addcuerange("ranges", 10, 20, false, entercallback, exitcallback);

147 Video on the Web Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone No No 1 No 1 No No No No

148 Video on the Web Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone No No 1 No 1 No No No No 1 Firefox 3.1/Safari 3.1 will support

149 Video on the Web Report Card Firefox 2 Firefox 3 Safari 3 IE 6/7 IE 8 Chrome iphone No No 1 No 1 No No No No 1 Firefox 3.1/Safari 3.1 will support NOT READY

150 Even More

151 Even More Client-Side Storage

152 Even More 1 Client-Side Storage READY

153 Even More 1 Client-Side Storage READY 1 JavaScript shims (Dojo Storage); Gears

154 Even More 1 Client-Side Storage READY Offline 1 JavaScript shims (Dojo Storage); Gears

155 Even More 1 Client-Side Storage Offline READY 2 READY 1 JavaScript shims (Dojo Storage); Gears

156 Even More 1 Client-Side Storage Offline READY 2 READY 1 JavaScript shims (Dojo Storage); Gears 2 Gears

157 Even More 1 Client-Side Storage Offline READY 2 READY X-Domain 1 JavaScript shims (Dojo Storage); Gears 2 Gears

158 Even More 1 Client-Side Storage 2 READY Offline READY 3 X-Domain READY 1 JavaScript shims (Dojo Storage); Gears 2 Gears

159 Even More 1 Client-Side Storage 2 READY Offline READY 3 X-Domain READY 1 JavaScript shims (Dojo Storage); Gears 2 Gears 3 JSONP

160 Even More

161 Even More Fast JavaScript

162 Even More 1 Fast JavaScript ALMOST

163 Even More 1 Fast JavaScript ALMOST 1 All browsers but IE (Tracemonkey, V8, etc.)

164 Even More 1 Fast JavaScript ALMOST JavaScript++ 1 All browsers but IE (Tracemonkey, V8, etc.)

165 Even More 1 Fast JavaScript ALMOST 2 JavaScript++ NOT READY 1 All browsers but IE (Tracemonkey, V8, etc.)

166 Even More 1 Fast JavaScript ALMOST 2 JavaScript++ NOT READY 1 All browsers but IE (Tracemonkey, V8, etc.) 2 Still in standards bodies

167 Take Action

168 Take Action code.google.com

169 Take Action code.google.com code.google.com/doctype

170 Take Action code.google.com code.google.com/doctype ajaxian.com

171 Take Action code.google.com code.google.com/doctype ajaxian.com whatwg.org

172 Take Action code.google.com code.google.com/doctype ajaxian.com whatwg.org Slides:

173 State of the Open Web Brad Neuberg, Google

Introduction to HTML 5. Brad Neuberg Developer Programs, Google

Introduction to HTML 5. Brad Neuberg Developer Programs, Google Introduction to HTML 5 Brad Neuberg Developer Programs, Google The Web Platform is Accelerating User Experience XHR CSS DOM HTML iphone 2.2: Nov 22, 2008 canvas app cache database SVG Safari 4.0b: Feb