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