the webas it should beMartin Beeby - @thebeebs
paving theway to theend userHotbed of innovationWorld of standardsEver-closer user experiences
in the beginning…mosaic   netscape navigator   internet explorer v11993                          August 1995
2001                      a space odysseyInternet Explorer 6 - Microsoft won the Web (or so they thought)
http://www.youtube.com/watch?v=Gp-FQN_v3AM
we allmakemistakes
the riseof thecompetitionAmazing browserscame on-lineMicrosoft had a longjourney to catch up
the journey so farMarch 2011Internet Explorer 9 Great browser Constant development momentum Eight-week beta-launch cycles ...
innovate or die
standards-basedbrowsingHTML5W3C:Sixteen full-time employeesMost test cases submittedaround 1,700But we still innovate
smallest chrome
bringing users closer
web sites asapplications                Fully-fledged Applications                HTML5                CSS3               ...
just some of the newhtml5 features…Animation Frames               CSS Positioned Floats (Exclusions)   FormData           ...
cookbookdemo
off-line access
benefits           applications work correctly           at all times             User-generated data can             be s...
appcachecreation flow                       caches                     resources                       locally First run f...
appcachehow it worksBehind the scenes after Web content displayedManifest file specifies resource URIs to cacheCache only ...
appcache  vs         Guaranteed availability of  http       cached resources             Correct off-line resolution of UR...
indexed db
indexed dbvs relational dbConcept                              Relational DB                                     IndexedDB...
indexed dbhow it worksvar oRequestDB = window.indexedDB.open("Library");oRequestDB.onsuccess = function (event) {    db1 =...
indexed dbbenefitsOptimised way of querying data objectsWebsite access to large amounts of related dataData filtering usin...
websocketsand xhr
benefits            Better off-line application            performance            Improved user stickiness            to t...
webapplicationuserexperience
thebeautyof html5
achieving browserinvisibility
real worldwww.beautyoftheweb.co.uk                           Showcase of sites using                           HTML5
test drivehttp://ie.microsoft.com/testdrive/                                     download                                 ...
the webas it should beW3C standards-based: HTML5, CSS3, Web-browsersApplication delivery platformCompelling end-user exper...
contactmartin beeby@thebeebshttp://www.ubelly.com/html5martin.beeby@microsoft.com
Upcoming SlideShare
Loading in...5
×

The web as it should be

1,167

Published on

With the advent of CSS3 and the ever-greater maturity of HTML5, it’s an exciting time for the Web. The possibilities for creating truly engaging – even addictive – Web and business applications appear limitless. And, with the release of Internet Explorer 9, Microsoft finally came in from the cold after many years in the world wide wilderness.

As Internet Explorer moves towards full support of standards-based HTML5 and CSS3, this is a great opportunity to hear from Martin Beeby about how these key technologies will be used to build and deliver the applications of tomorrow, engage end-users like never before, and generate even greater loyalty to Web-sites.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,167
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

The web as it should be

  1. 1. the webas it should beMartin Beeby - @thebeebs
  2. 2. paving theway to theend userHotbed of innovationWorld of standardsEver-closer user experiences
  3. 3. in the beginning…mosaic netscape navigator internet explorer v11993 August 1995
  4. 4. 2001 a space odysseyInternet Explorer 6 - Microsoft won the Web (or so they thought)
  5. 5. http://www.youtube.com/watch?v=Gp-FQN_v3AM
  6. 6. we allmakemistakes
  7. 7. the riseof thecompetitionAmazing browserscame on-lineMicrosoft had a longjourney to catch up
  8. 8. the journey so farMarch 2011Internet Explorer 9 Great browser Constant development momentum Eight-week beta-launch cycles Faster launch cadence
  9. 9. innovate or die
  10. 10. standards-basedbrowsingHTML5W3C:Sixteen full-time employeesMost test cases submittedaround 1,700But we still innovate
  11. 11. smallest chrome
  12. 12. bringing users closer
  13. 13. web sites asapplications Fully-fledged Applications HTML5 CSS3 Standards-based Web technologies IE10 is a distinct application delivery platform
  14. 14. just some of the newhtml5 features…Animation Frames CSS Positioned Floats (Exclusions) FormData Page VisibilityCSS3 2d Transforms CSS Selectors HTML5 Application Cache Pointer (Mouse, Pen and Touch)CSS 3d Transforms CSS Transitions HTML5 async EventsCSS3 Animations CSS Values and Units HTML5 Canvas Resource TimingCSS3 Backgrounds and Borders Data URI HTML5 Drag and drop Selectors API Level 2CSS Color DOM Element Traversal HTML5 Forms and Validation SVG Filter EffectsCSS FlexBox DOM HTML HTML5 Geolocation SVG InlineCSS Fonts DOM Level 3 Core HTMl5 History API Timing CallbacksCSS Grid Alignment Dom Level 3 Events HTML5 Parser Web MessagingCSS Hyphenation DOM Style HTML5 Sandbox Web SocketsCSS Image Values (gradients) DOM Traversal and Range HTML5 Selectors Web WorkersCSS Media Queries DOMParser and XMLSerializer HTML5 semantic elements XHTML5/XMLCSS multi-column layout ECMAScript 5 HTML5 Video and Audio XMLHttpRequest (Level 2)CSS Namespaces File Reader API ICC Colour ProfilesCSS OM Views File Saving IndexedDB
  15. 15. cookbookdemo
  16. 16. off-line access
  17. 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. 18. appcachecreation flow caches resources locally First run fetches Later runs fetch info from network info from cache
  19. 19. appcachehow it worksBehind the scenes after Web content displayedManifest file specifies resource URIs to cacheCache only created if all resources are downloadedEasy-update of manifest file to update target cache contentApplications can access cached resources using URLs and URIs
  20. 20. appcache vs Guaranteed availability of http cached resources Correct off-line resolution of URLscaching http caching can optimise appcache behaviour
  21. 21. indexed db
  22. 22. indexed dbvs relational dbConcept Relational DB IndexedDBDatabase Database DatabaseTables Tables contain columns and rows objectStore contains Javascript objects and keysQuery Mechanism, Join, and Filters SQL Cursor APIs, Key Range APIs, and Application CodeTransaction 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 directlyRecords/Data Normal form and single valued properties De-normal form and can have multi-valued properties
  23. 23. indexed dbhow it worksvar 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. 24. indexed dbbenefitsOptimised way of querying data objectsWebsite access to large amounts of related dataData filtering using KeyRange objects“Master” cloud and local IndexedDB database architectureFaster searchesOff-line data access
  25. 25. websocketsand xhr
  26. 26. benefits Better off-line application performance Improved user stickiness to the application greater opportunity for your business
  27. 27. webapplicationuserexperience
  28. 28. thebeautyof html5
  29. 29. achieving browserinvisibility
  30. 30. real worldwww.beautyoftheweb.co.uk Showcase of sites using HTML5
  31. 31. test drivehttp://ie.microsoft.com/testdrive/ download Internet Explorer 10 preview Example applications http://dev.windows.com
  32. 32. the webas it should beW3C standards-based: HTML5, CSS3, Web-browsersApplication delivery platformCompelling end-user experiencesDriven by innovation
  33. 33. contactmartin beeby@thebeebshttp://www.ubelly.com/html5martin.beeby@microsoft.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×