Your SlideShare is downloading. ×

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 …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. the webas it should beMartin Beeby - @thebeebs
  • 2. paving theway to theend userHotbed of innovationWorld of standardsEver-closer user experiences
  • 3. in the beginning…mosaic netscape navigator internet explorer v11993 August 1995
  • 4. 2001 a space odysseyInternet Explorer 6 - Microsoft won the Web (or so they thought)
  • 5.
  • 6. we allmakemistakes
  • 7. the riseof thecompetitionAmazing browserscame on-lineMicrosoft had a longjourney to catch up
  • 8. the journey so farMarch 2011Internet Explorer 9 Great browser Constant development momentum Eight-week beta-launch cycles Faster launch cadence
  • 9. innovate or die
  • 10. standards-basedbrowsingHTML5W3C:Sixteen full-time employeesMost test cases submittedaround 1,700But we still innovate
  • 11. smallest chrome
  • 12. bringing users closer
  • 13. web sites asapplications Fully-fledged Applications HTML5 CSS3 Standards-based Web technologies IE10 is a distinct application delivery platform
  • 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. cookbookdemo
  • 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. appcachecreation flow caches resources locally First run fetches Later runs fetch info from network info from cache
  • 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. appcache vs Guaranteed availability of http cached resources Correct off-line resolution of URLscaching http caching can optimise appcache behaviour
  • 21. indexed db
  • 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. 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. 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. websocketsand xhr
  • 26. benefits Better off-line application performance Improved user stickiness to the application greater opportunity for your business
  • 27. webapplicationuserexperience
  • 28. thebeautyof html5
  • 29. achieving browserinvisibility
  • 30. real Showcase of sites using HTML5
  • 31. test drive download Internet Explorer 10 preview Example applications
  • 32. the webas it should beW3C standards-based: HTML5, CSS3, Web-browsersApplication delivery platformCompelling end-user experiencesDriven by innovation
  • 33. contactmartin beeby@thebeebs