The web as it should be
Download as PPTX, PDF1 like870 views
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.
![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;
}
};](https://image.slidesharecdn.com/thewebasitshouldbeshare-111110141820-phpapp02/85/The-web-as-it-should-be-23-320.jpg)
The web as it should be
- 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)
- 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
- 10. standards-based browsing HTML5 W3C: Sixteen full-time employees Most test cases submitted around 1,700 But we still innovate
- 11. smallest chrome
- 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
- 26. benefits Better off-line application performance Improved user stickiness to the application greater opportunity for your business
- 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