The document discusses the evolution of web browsers, focusing on advancements in HTML5 and CSS3 technologies that enhance user experiences. It highlights the importance of standards-based browsing, the role of Internet Explorer in this evolution, and the benefits of technologies like IndexedDB and WebSockets for offline application performance. The document also emphasizes the need for innovation in the web space to deliver compelling end-user experiences.

1. the web
as it should be
Martin Beeby - @thebeebs

2. paving the
way to the
end user
Hotbed of innovation
World of standards
Ever-closer user experiences

3. in the beginning…
mosaic netscape navigator internet explorer v1
1993 August 1995

4. 2001 a space odyssey
Internet Explorer 6 - Microsoft won the Web (or so they thought)

5. http://www.youtube.com/watch?v=Gp-FQN_v3AM

6. we all
make
mistakes

7. the rise
of the
competition
Amazing browsers
came on-line
Microsoft had a long
journey to catch up

8. the journey so far
March 2011
Internet Explorer 9
Great browser
Constant development
momentum
Eight-week beta-launch cycles
Faster launch cadence

9. innovate or die

10. standards-based
browsing
HTML5
W3C:
Sixteen full-time employees
Most test cases submitted
around 1,700
But we still innovate

11. smallest chrome

12. bringing users closer

13. web sites as
applications
Fully-fledged Applications
HTML5
CSS3
Standards-based Web technologies
IE10 is a
distinct application
delivery platform

14. just some of the new
html5 features…
Animation Frames CSS Positioned Floats (Exclusions) FormData Page Visibility
CSS3 2d Transforms CSS Selectors HTML5 Application Cache Pointer (Mouse, Pen and Touch)
CSS 3d Transforms CSS Transitions HTML5 async Events
CSS3 Animations CSS Values and Units HTML5 Canvas Resource Timing
CSS3 Backgrounds and Borders Data URI HTML5 Drag and drop Selectors API Level 2
CSS Color DOM Element Traversal HTML5 Forms and Validation SVG Filter Effects
CSS FlexBox DOM HTML HTML5 Geolocation SVG Inline
CSS Fonts DOM Level 3 Core HTMl5 History API Timing Callbacks
CSS Grid Alignment Dom Level 3 Events HTML5 Parser Web Messaging
CSS Hyphenation DOM Style HTML5 Sandbox Web Sockets
CSS Image Values (gradients) DOM Traversal and Range HTML5 Selectors Web Workers
CSS Media Queries DOMParser and XMLSerializer HTML5 semantic elements XHTML5/XML
CSS multi-column layout ECMAScript 5 HTML5 Video and Audio XMLHttpRequest (Level 2)
CSS Namespaces File Reader API ICC Colour Profiles
CSS OM Views File Saving IndexedDB

15. cookbook
demo

16. off-line access

17. benefits
applications work correctly
at all times
User-generated data can
be stored off-line
Improved overall performance
by spreading the load
between the cloud and client

18. appcache
creation flow
caches
resources
locally
First run fetches Later runs fetch
info from network info from cache

19. appcache
how it works
Behind the scenes after Web content displayed
Manifest file specifies resource URIs to cache
Cache only created if all resources are downloaded
Easy-update of manifest file to update target cache content
Applications can access cached resources using URLs and URIs

20. appcache
vs Guaranteed availability of
http cached resources
Correct off-line resolution of URLs
caching http caching can optimise
appcache behaviour

21. indexed db

22. indexed db
vs relational db
Concept Relational DB IndexedDB
Database Database Database
Tables Tables contain columns and rows objectStore contains Javascript objects and keys
Query Mechanism, Join, and Filters SQL Cursor APIs, Key Range APIs, and Application Code
Transaction Types and Locks Lock can happen on databases, tables, Lock can happen on database on VERSION_CHANGE
or rows on READ_WRITE Transactions transaction, on an objectStores on READ_ONLY and
READ_WRITE transactions. There is no object level locking.
Transaction Commits Transaction creation is explicit. Default is to Transaction creation is explicit. Default is to commit unless I call
rollback unless I call commit. abort or there is an exception that is not caught.
Property Lookups SQL Indexes are required to query object properties directly
Records/Data Normal form and single valued properties De-normal form and can have multi-valued properties

23. indexed db
how it works
var oRequestDB = window.indexedDB.open("Library");
oRequestDB.onsuccess = function (event) {
db1 = oRequestDB.result;
if (db1.version == 1) {
txn = db1.transaction(["Books"], IDBTransaction.READ_ONLY);
var objStoreReq = txn.objectStore( "Books");
var request = objStoreReq.get("Book0");
request.onsuccess = processGet;
}
};

24. indexed db
benefits
Optimised way of querying data objects
Website access to large amounts of related data
Data filtering using KeyRange objects
“Master” cloud and local IndexedDB database architecture
Faster searches
Off-line data access

25. websockets
and xhr

26. benefits
Better off-line application
performance
Improved user stickiness
to the application
greater opportunity
for your business

27. web
application
user
experience

28. the
beauty
of html5

29. achieving browser
invisibility

30. real world
www.beautyoftheweb.co.uk
Showcase of sites using
HTML5

31. test drive
http://ie.microsoft.com/testdrive/
download
Internet Explorer 10 preview
Example applications
http://dev.windows.com

32. the web
as it should be
W3C standards-based: HTML5, CSS3, Web-browsers
Application delivery platform
Compelling end-user experiences
Driven by innovation

33. contact
martin beeby
@thebeebs
http://www.ubelly.com/html5
martin.beeby@microsoft.com