Reactive Extensions for .NET
HTML5 for developersMark Allan
MarkXA.com1
MarkXA.com2What well be coveringAn overview of what HTML5 actually isThe main features and a few demosEmphasis on whats of interest to developers rather than designersWhen you can use it (and how much of it)Other caveatsWindows 8
MarkXA.com3What is HTML5?Usually a catch-all term for the next generation of web client technologies.HTML5CSS3JavaScript APIs
MarkXA.com4HTML5 Semantics - StructureTags for document structure, semantic versions of and :, , , , , Used for document outlining, syndication and accessibility
MarkXA.comWell start with the actual HTML:
Think about a blog post header, footer, menus, adverts, actual article
Instead of wrapping everything up in DIVs and using CSS classes
Gives some meaning, good for Google5HTML5 Semantics - FormsNew input tags forDate/timeColourNumbersRangesEmail addressesURLsTelephone numbersSearchesValidation, autofocus, watermarks
MarkXA.comMore actual HTML.
This is where jQuery would have been used in the past.6HTML5 Multimedia
Multiple codecsOnly limited controlNo DRM yet
MarkXA.comLast bit of actual HTML.
Allows simple embedding of video and audio into pages
Not as powerful as a Flash or Silverlight player
Currently need to transcode to several formats7HTML5 Graphics & Effects - 2D bitmaps - 3D with WebGL 2D vectors
MarkXA.comIntended to remove need for Flash and other graphical plugins
SVG inline or as backgrounds etc8CSS3Media queriesTransitions, transforms and animationsWeb FontsGradientsFlexible box modelColumnsetc
MarkXA.comA whole load of new features for making pages pretty!9HTML5 Offline & StorageOffline access and eventsFile APILocal storageSession storageIndexedDBWeb Database (SQL)
MarkXA.comNow getting into APIs and how to make real applications.
Imagine youre writing text editor with offline capability:Offline access manifest for required resources, notification events for going on and offlineFile API access to local filesLocal persistent name-value pairsSession per tab name-value pairs, for running two independent sessions in parallelIndexedDB persistent local object databaseWebDB persistent local database with SQL querying (deprecated)10HTML5 ConnectivityWeb socketsServer-sent events
MarkXA.comWeb sockets allow full-duplex direct network connections, e.g. for chat applications or other notifications
Server-sent events basically use sockets as a transport for a simpler way for servers to perform a callback on a client11HTML5 Device AccessGeolocation API widely supportedAlso proposals and implementations forAccelerometerMicrophoneCameraetc
MarkXA.comGeolocation includes altitude, direction, speed, accuracy, etc12HTML5 Performance & IntegrationWeb WorkersXMLHttpRequest 2Cross-origin requestsProgress updatesTimeoutsBinary streamsDrag and dropNotifications (toast)
MarkXA.comWeb workers are basically JavaScript threads with a messaging interface.
XHR2 new features cross-origin requests, progress updates, timeouts, binary objects and streams13How much HTML5 can we use?CurrentFutureIE9.0: 54%10.0: 80%Firefox7.0: 87%8.0: 88%Safari5.1: 77%6.0: 78%Chrome14.0: 90%15.0: 90%Opera11.5: 71%12.0: 76%iOS4.3: 63%5.0: 68%Android2.3: 52%3.0: 69%MarkXA.comThese figures are for roughly how much of the spec is supported
Anyone on IE6 or 7 is even worse off.14ProblemsFor general use, need Modernizr and polyfillsSecurity becomes harderOffline brings sync problemsSpec is still fluidDevice performance variesMarkXA.com15Windows 8Uses IE10 with hardware accelerated renderingExtra layout options (grid submitted to W3C)Access to WinRTBut doesnt carry over to the webMarkXA.com16ConclusionsHTML5 allows you to build powerful appsIf you have to write for everyone, its still hardBut if you know exactly who youre targeting, you can get native-quality experienceMarkXA.com17Questions?MarkXA.com18
