The web as it should be


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
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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.
  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 ="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 Showcase of sites using HTML5
  31. 31. test drive download Internet Explorer 10 preview Example applications
  32. 32. the webas it should beW3C standards-based: HTML5, CSS3, Web-browsersApplication delivery platformCompelling end-user experiencesDriven by innovation
  33. 33. contactmartin beeby@thebeebs