HTML5 for developers

  • View

  • Download

Embed Size (px)

Text of HTML5 for developers

Reactive Extensions for .NET

HTML5 for developersMark Allan


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