Since the early days of the web, marketeers have espoused the merits of “managing customer experience” and how online it is only the “experience” that will differentiate companies as the web brings pricing transparency. Certainly in the case of the latter issue, the rise of “comparison” sites has highlighted the fact that price alone can not be a long term strategy. Post the Internet bubble bursting the issue of customer experience has for many had to take a back seat while organizations strove cost cutting measures to remain profitable or even just to survive in the midst of recession.
However more recently it seems that customer experience is again getting more prominence and importance in organizations. I believe mobile has had a role to play in creating this renewed excitement with the apps showing “the art of the possible”: engaging user interfaces with greater usability. It’s no surprise to see experience champions rallying their brethren troops to create their own community of professionals in the field. Founded by Bruce Temkin (previously an analyst at Forrester) , the CXPA (Customer experience Professionals Association) is a organization focused on creating standards and best practice in Customer Experience Management. As a non profit organization it’s sponsors in Adobe, Microsoft and SAP. Whilst it is early days there are enough credible people involved to make this a success in an area which sorely requires standards.
But what really captured my attention this week was an announcement by US Insurance company Mass Mutual, appointing a Chief Customer Experience Officer, the remit of this role is to manage “central oversight of the end-to-end experience for MassMutual customers to ensure a consistent, favorable and efficient interaction across the organization”. What’s interesting about this is that whilst most C level directors recognize the importance of customer experience, very few actually have someone in their company whose prime responsibility is managing customer experience.
So well done to Mass Mutual and hopefully we see many more similar appointments, in the meantime however the CXPA or someone of the same ilk needs to bring some much needed standards and best practices to a field crowded with self proclaimed “experts”.
My previous posts about “The end of Silverlight” and “The end of Flash” both raised active debate. The general view was that I knew too little about Silverlight and Flash to make such brash claims and whilst there is some truth in that it also transpired that the general awareness of what HTML5 can do today, and what it promises when complete is poor, and that is the issue that my run of posts on HTML5 has really sought to address. Hopefully for those that haven’t had any exposure to HTML5, my posts have been of value.
The longer term is much more difficult to forecast, there is a place for both especially for rich multimedia applications and gaming, but for business applications there is going to be small minority of applications that could possibly require them. In the report by Gartner (“The (not so) Future Web”, they too agree saying that “Gartner expects leading RIA vendors to maintain a pace of innovation that keeps them relevant, but for a gradually shrinking percentage of Web applications.”
However one can’t completely ignore that web technology is evolving fast and that new spec’s are filling in the gaps for HTML5 already for example work is already in progress for TV and Gestures as well as previously mentioned 3D graphics. We are seeing major new releases of browsers with greater support for HTML5 being launched at a faster rate than ever before, coupled with a battle for the fastest JavaScript engine. A new release of JavaScript promises much better standardization as well as new features.
The developer forums are now awash with an outcry from loyal Microsoft developers demanding to know the future of Silverlight in Microsoft’s grand plans, where once there was no doubt that Silverlight is core to Microsoft. IMHO I doubt Microsoft will make a U turn on Silverlight, but I will re-iterate that the need for Silverlight in business applications will lessen as HTML5 matures.
Whilst I’ve been an active follower and advocate for HTML5, what I see lacking is a roadmap and vision for HTML, a lot more detail about how the semantic web will evolve and what it means to developers in the short and medium term. This is something the vendors seem much better at and is no wonder developers buy-in to certain technologies over others.
In the end as always the real question is not which is the better technology but what is the appropriate technology for what you need to achieve and the audience and platforms you are targeting.
Movie and Audio features in HTML5 are like many of the features I have discussed previously, they:
• Have a history of controversy over Codec support
• Specifications are too large to do real justice in these short posts
• Are an exciting, powerful new addition that will transform the web
To date the most popular media player on the web has been Adobe’s flash player, and arguably it has been it’s most popular use. Apple’s lack of support in their devices for Flash has created a small crack in Adobe’s party, but this crack could open further into a chasm that their flash drops into! However there have been many other shenanigans in this story and rather than delve into to those murky stories I’m going to again give a brief overview of the capabilities of these new features. The good news is that HTML5 will remove the need for proprietary plug-in’s like Flash and Quicktime for playing sound and movies.
audio and video are both media elements in HTML5, and as such share common API’s for their control. In fact you can load video content into an audio element and vice versa, audio into a video element – the only difference is that the video element has a display area for content, whereas the audio element does not. Defining an audio element and source file is pretty straightforward
<audio controls src=”my musicfile.mp3”
My audio clip
</audio>
You can actually assign multiple source ( src ) files. This is to allow you to provide the audio in multiple formats, so that you can support the widest array of browsers. The browser will go through the list in sequential order and play the first file it can support, so it’s important you list them in order of the best quality first rather than by most popular format.
To load a movie you simply replace the audio element with video. Video’s can also define multiple sources. You may additionally specify the height and width of the video display area.
Next to control media you can use the following API’s: load(), play(), pause(), I think what they do is self explanatory. canPlayType(type) can be used to check whether a specific format is supported.
Some read only attributes can be queried such as duration, paused, ended, currentSrc to check duration of the media, whether it has been paused or ended and which src is being played.
You can also set a number of attributes such as autoplay, loop, controls, volume to automatically start media, repeat play the media, show or hide media controls and to set the volume.
These aren’t exclusive lists of API’s or attributes as there are many more but they are some of the most common features of the audio and video people will use. With video especially there are many more great things you can achieve like creating timelines and displaying dynamic content as specific points in the video (no doubt this will be used for advertising amongst other more interesting uses).
Clearly the web will get richer with full multimedia content without the perquisite of plug-ins. However developers should be aware of the various formats supported by specific browsers and aim to provide media in as many formats as possible.
Many sites today do use sound and movies, but I believe with native support and greater imagination a new world of dynamic rich media sites will change the user experience in the same way that Ajax transformed static content into the dynamic web. With it we will see new online behaviors, a topic I will cover soon, and whilst some have said the future of TV is online the web may just give it a new lease of life !
HTML5 graphics features will drive gaming and rich media to the web
My post about HTML5 games is a great way to experience one of the features in HTML5 that will no doubt make a huge difference to browser experiences. It’s hard to imagine in our rich multimedia world that without proprietary techniques or plug-ins that web standards do not support the simple task of drawing a line, box, circle or any shape! All that is changing with HTML5 with the Canvas API.
<canvas> </canvas> This is the basic canvas element notation which will set the world web alight with animation and richer experiences. It is already transforming the art of the possible in gaming on the web. The original 2D API was created within webkit by Apple who then provided it to the standards body with a royalty free patent licence. In February this year the Khronos Group issued version 1.0 of it’s WebGL API providing 3D rendering capabilities within browsers.
So what is a Canvas? A canvas is essentially a rectangular area on the screen that you can add and manipulate graphics. Simple? If only. The basic action of drawing a line requires: creating a canvas, getting the canvas context, starting a path (beginPath()), defining a start point ((moveTo(x, y)), moving to the end of the line (lineTo( x, y )), closing the path to say we finished drawing our line (closepath()) and finally drawing the line (stroke()). If this sounds complex let me tell you that to do even this simple action previously involved some very imaginative code and image manipulation.
You can create simple or complex shapes using “paths“. Drawing a line following the path only occurs when you call stroke() . If the path create a shape it can also be “filled” using fill() . A fill can have colours and styles (e.g. a pattern, gradient or image).
With more curvy shapes you need to look to quadraticCurveTo(), bezierCurveTo(), arcTo() and arc() to create a path that curves.
Apart from drawing and colouring (“filling”) images can be transformed: scaled (scale()), rotated (rotate())and skewed (transform ()).
Apart from shapes, of course you can draw and fill in text on the Canvas. And there are also API’s to create set the attributes of shadow’s: shadowColor sets the color of the shadow, shadowOffsetX and shadowOffsetY positions the shadow from the original shape or text and shadowBlur allows you to blur the shadow.
There is so much more that can be said about Canvas that I almost didn’t bother with this simple overview for fear of not doing it any justice. However in the end I felt it needed a mention. The latest draft of the specification can be found here. Beyond this WebGL will provide a whole new set of more powerful capabilities however it is currently way behind the basic Canvas features in terms of browser support.
I’ve still not finished covering all the new features of HTML5, but I do think it’s time for a bit of a break. One of the real measures of whether HTML5 will take off will be how well it will support the gaming industry, and indeed here some people have feared that it will not deliver and have continued to back plug-in based technologies like Flash, Java or Silverlight. Well after extensive research it’s time to dispel a few myths
.
Now it’s not true that there haven’t been some great HTML games already, remember Google’s re-incarnation of PacMan and recently Effect Game’s Crystal Galaxy which will work even in IE6 !
However a number of features like Canvas, HTML5 Audio and WebWorkers are changing people’s perception of what is possible on the web and all without plug-ins ! So here is my top 5.
In at number 5 is, well not a game, but nevertheless a nice use of the new canvas API’s, a remake of the popular windows desktop app, Paintbrush.
At number 4 is another remake of an old classic, Asteroids! Whilst not up to the standard of today’s modern graphics they are a vast improvement over the games original line art graphics, and offers smooth movement and responsive feedback.
Number 3 is Canvas Rider a simple yet strangely addictive game requiring skill and judgement to guide a motorcyclist across a number of different scenes.
Just missing the top spot is Torus a 3D cylindrical version of Tetris.
However in first place has to be Pixel Lab’s Agent 8 Ball, great graphics, fast smooth operation and sound make it hard to believe that this is a browser game without any plug-in support. In fact this video comparison of Flash vs HTML seems to have totally missed this great example too (see comparison of pool game 3mins in). There are many more great examples out there, even for those Silverlight enthusiasts Microsoft has assembled some great examples of HTML5 in action.
So what’s the future? Well if Google’s demo last year of it’s web version of Quake is anything to go by things are certainly looking exciting ! The future is definitely not solo game play, as Game Closure showed last month when it demo’d a multiplay social game called Popstar Defense.
All the credit for this new world of possibility can’t just go to HTML5/Javascript as technologies because it is the tremendous improvements in Javascript engines by all the main stream browser providers that is giving the games a useful performance boost.
I’ll be covering some of the HTML5 features that enable these games such as Canvas and HTML5 Audio in future posts, enough research for now… time to get back to work !
As a relative late comer to HTML5 trying to catch up on a spec that spans over a 1000 pages is no mean feat, let alone the fact that the definition of what makes up HTML5 is covered across several specs (see previous blog on standards spaghetti). If you’ve been following this series then you’ll have worked out I have a few favourite features that I think will radically change the perception of web applications, and you guessed it HTML5’s support for database access is another.
The specification started out as early as 2006 with WebSimpleDB (aka WebSQL), and went as far as implementation into many browsers including webkit, Safari, Chrome and Firefox. From what I can find Oracle made the original proposal in 2009 and the W3C made a switch to Indexed DB sometime in 2010. Although Mozilla.org already had their own implementation using SQL-Lite, they too preferred IndexedDB). The current status as of April 2011 of the IndexedDB spec is that it is still in draft, and according to www.caniuse.com early implementations exist in Chrome 11 and Firefox 4. Microsoft have released a prototype on their html labs site at to show their current support .
Clearly it is not ready for live commercial applications in the short term, but it is certainly something worth keeping your eye on and to plan for. When an application requires more than simple key value pairs or requires large amounts of data, IndexDB should be your choice over HTML 5’s WebStorage api’s (localStorage and sessionStorage).
The first important feature about IndexDB is that it is not a relational database but in fact an object store. Hence there are no tables, rows or columns and there is no SQL for querying the data. Instead data is stored as Javascript objects and navigated using cursors. The database can have indexes defined however.
Next there are two API modes of interaction, Asynchronous and Synchronous API’s. As you would imagine synchronous API’s DO block the calling thread (i.e each call waits for a response before returning control and data). Therefore it follows that the asynchronous API’s do NOT block the calling thread. When using asynchronous API’s a callback function is required to respond to the events fired by the database after an instruction has been completed.
Both approaches provide API’s for opening, closing and deleting a database. Databases are versioned, and each database can have one or more objectstores. There are CRUD API’s for datastore access (put, get, add, delete) as well as API’s to create and delete index’s.
Access to the datastore is enveloped in transactions, and a transaction can be used to access multiple data stores, as well as multiple actions on a datastore.
At a very high level, there you have it, IndexDB is a feature that allows you to manage data in the browser. This will not only be useful for online applications (e.g. a server based warehouse could export data cubes for local access) but also for offline applications to hold data until a connection can be established. I’d fully expect a slew of Javascript frameworks to add value ontop of what the standards provide, indeed persistence.js is one such example.
It’s good to see early implementations and prototypes for IndexDB and whilst the date for finalising this spec is unclear, I for one will be monitoring it’s progress closely and waiting with baited breath for it’s finalisation.
A few years back I was deemed a heretic by many of my colleagues and friends when I suggested that HTML5 will remove the need for writing many mobile applications. I was pummelled with questions like:
But how will they work offline?
Are you saying a browser user experience can rival a platform native one like Apples?
You do realise that most games require “threading” how you going to do that?
What about storing data locally, can you do that?
I was able to fend of most of these, but the one I couldn’t at the time was about accessing the device applications like Camera and GPS. Well things have moved on and whilst I am no longer deemed a heretic there are still some corridor’s whispering doubt.
One of the big features of mobile technology used by many apps is the phones location and location based services and application have already been through a huge hype cycle.
Under the catch-all banner of HTML5, although it is a separate subspec, the W3C Geo Location working group are making location based applications a reality for web developers. It has been around a while and hence is fairly mature and stable now.
A device (even a desktop) can provide location information in a number of ways:
IP Address (this is typically the location of the ISP rather than your machine, but ok if you simply want to check which country the user is in)
Cell Phone triangulation (only fairly accurate, very dependent on the phone signal so could be problematic in the countryside or inside buildings)
GPS (very accurate, takes longer to get location, dependant on hardware support and can be unreliable inside buildings)
Location data can also be simply user defined: however this is dependent on the user entering accurate information.
Of course one of the key concerns will be privacy but the spec covers this with an approach that the requires a user to give permission for location information to be passed to an application. Note the application can only access location information through the browser and not directly e.g. from the GPS device. Hence the browser enforces the user permissions for access.
The Geo Location API allow for both one off request to get the users current location or for repeated updates on the user’s position, developers write simple callback routines for both approaches. The key information provided includes: latitude, longitude and accuracy. Accuracy is a %value of how close the longitude and latitude values are to the user. Depending on the device you may also get additional information such and speed, heading (direction of travel) and altitude.
As per any quality application you process errors accordingly, especially responding to a failure to get hold of location data because of signal issues or other reasons. Hence retrieving location information is fairly simple, the real hardwork is in processing that information and that requires good old fashioned quality programming ;o)
This specification presents a huge opportunity for web developers to create applications once deemed only the domain of platform specific code, and I for one am very excited !
Thanks to Microsoft not only do I have to fix my friends and family PC (well actually Windows) issues, but they now keep asking me about the cloud. So in retaliation I’m going to write about the total opposite: how you can get web applications to run offline using HTML5.
There have been a number of open and proprietary technologies that have allowed applications to be delivered and updated through the web but to operate locally. Some of these have been dependant on plug-ins e.g. flash, Silverlight or platform specific such as Microsoft HTA.
HTML5 now brings with it features that not only allow you to run applications offline but also to store data and content with it too. Of course you may be thinking with 3G, 4G and Wifi we have ubiquitous broadband anytime anywhere, but you only have to take a stroll out of the city to realise we are not quite there. In fact the success of mobile apps has highlighted the need for local offline applications.
First an application can check whether it is online or offline by checking the navigator.online property (it is a simple Boolean). There are also events to notify an application of a change in status so an application can behave as desired in either it’s online or offline state.
HTML5 allows you to define a “Manifest” , essentially this simply lists the files (pages, images, scripts etc…) an application wants the browser to store (cache) locally so that they can be read when offline. There are also events and processing that can be programmed to control how and when the cached pages are refreshed, this includes the ability to show progress bars whilst a large application is being downloaded to the cache.
There aren’t many applications that don’t rely on stored data. HTML5 WebStorage specification provides new API’s for persisting data as simple key value pairs. There are two options here: sessionStorage or localStorage. The key difference between the two is how long the data is kept for. Simply, if your application just needs data whilst it is currently running (and not after the browser is closed) then use sessionStorage , otherwise if your application needs data that can be used after browser re-starts use localStorage. Although this sounds similar to cookies, these API’s are far more efficient and can store far more data than cookies. Both options provide getItem, setItem and removeItem methods for retrieving, storing and removing values. There are also events that can be trapped and processed by an application when data changes. For me the WebStorage specification is one of the most exciting as I have previously blogged the need for “client side session management” to improve performance and efficiency of web applications.
In many applications this simple storage of data will not be enough and users will want much more the capabilities of a database that can be queried and sorted. Here the IndexDB specification comes to the rescue. This specification deserves a blog post in it’s own right, so for now I’m going to leave it as HTML5’s answer to having a local database capability.
So HTML5 brings a host of features to make rich, dynamic applications with local storage work offline a reality. But we are still a way off from this being a ubiquitous solution as standards/specifications gets finalised and desktop browser’s play catchup with enabling these new features. However the time is right for your organisations to re-evaluate the technologies used for offline applications as HTML5 is a serious contender for the future that is inevitably going to require a cross platform approach to both online and offline.
In my blog about HTML5 confusion I never really answered the question on everyone’s lips “Exactly what is in HTML5 ?”. And guess what I’m going to skip the issue again and just follow the categorisation of features as per the W3C as they have very pretty logo’s for each category and mainly because it’s important to know what can be done with HTML5.
The W3C have identified 8 categories of new functionality / capabilities offered by ” HTML5” which can be found here, they are:
Semantics
Create “smarter” documents for users and machine readers
RDFa, Microdata, Microformats, richer semantics/structure
Offline and & Storage
Ability for web applications to store data locally and run offline.
Application caching, session and local storage, Indexed DB
Device Access
Allow applications to access device features such as GPS
Geolocation API, more to follow including gesture events
Connectivity
More/better communication options between server & browser
Websockets, Server pushed messages, Cross document msgs
Multimedia
Add and control sound and video on your sites
Audio/Video elemts and API’s
Graphics and Effects
Draw and animate 2/3D rich graphics
SVG, Canvas, WebGL, CSS 3D
Performance & Integration
Asynchronous communication and processing
WebWorkers (threading in browser), XMLHttpRequest L2
CSS3 Improved styles, transforms, effects and fonts
CSS3, WebFonts (Web Open Fonts Format – WOFF)
Whilst the graphics and simple descriptions are quite cool what concerns me is again the ambiguity:
HTML5 is more than HTML (its CSS as well, but what about Javascript?)
XMLHttpRequest is performance and integration whereas it is actually this feature that created “web 2.0” by enabling asynchronous communication between browser and server, the cornerstone of Ajax.
In the categories above where does the Forms validation improvements fit in? (probably in semantics, but I feel this should have it’s own category)
There’s clearly a tremendous amount of really excellent work going into HTML5, it has sound principles and gaining strong momentum – especially in the mobile world. However this has to be balanced with the fact there is still lots of work to do, ambiguities to be ironed out and getting all involved parties and bystanders to sing off the same hym sheet should all not be underestimated.
The finalisation of the specification (when it becomes “candidate recommendation”) is expected sometime in 2012 by the spec’s main editor, Google’s Ian Hickson. However to be a W3C Recommendation status requires “two 100% complete and fully interoperable implementations” and this Hickson believes will happen around 2022 or even later.
However the bandwagon and gravy-train for HTML5 has already started rolling and is gaining momentum, I would say only the foolish will not hop on board. IMHO it is only a matter of when not IF for HTML5. Question is what will you do?
For those that have been tracking HTML5 for a while I’m sure life is crystal clear, for those that have not well lets just say you may need some help navigating your way through over 900 pages of documentation which is duplicated by two separate standards organisation and further confused by media journalists and industry analysts.
First a quick step back into history: 1991 Tim Berners Lee publishes “HTML Tags” basically the first publication documenting HTML. However it was not until 1995 with the publication HTML 2.0 that a standard was born by a working group in the Internet Engineering Task Force (IETF). Fast forward again and W3C took over HTML in 1996 but it was not until 2000 HTML became an international standard (ISO/IEC 15445:2000). In 1999 the W3C issued HTML 4.01.
In 2004 a working group consisting of individuals Apple, Opera and Mozilla formed the Web Hypertext Application Technology Working Group (WHATWG) to look at the evolution of HTML. The WHATWG believed that much more evolution was required and their views were in contrast to what the W3C was doing with Xforms in 2003. The WHATWG set out on their own to define HTML’s destiny. However in 2006 the W3C took an interest in participating in their work and both groups have been working together since.
Simple right? So they are both working together on HTML5 specification and are going to publish a spec soon? The answer to this question is not so easy, so we have to break up the question.
Yes they are both working together. However the specification(s) being worked on by the WHATWG cover broader technical ground than the specification for HTML5 being proposed by the W3C (e.g. Canvas 2D, Microdata, Cross document messaging). In addition to this the HTML specification developed by the WHATWG is a subset of their “Web Application” specification which covers additional topics (e.g. WebWorkers, WebStorage, WebSockets…).
Essentially the W3C have divided out some of the work that the WHATWG are doing as separate specifications/standards. The good news is that we are told they are both working from the same source. The relationship of the various documents are neatly summarised in the FAQ’s of the WHATWG website (see link below).
All clear now? At the start of this article I alluded to other parties adding to the confusion, mainly the Press and Analysts. Some of this stems from the various sub specs created by the WHATWG and W3C, but also by the grouping of the evolution of other separate but related technologies like CSS and Javascript. In an attempt to help their clients clarify the situation technology analyst Gartner describes this superset of standards with the catch-all term “Modern Web Technologies”, however I am yet to find a single definition of all the standards their terminology encompasses.
As I sifted through sites and wiki’s everything was going so well until the W3C launched their HTML 5 logo programme saying that it was for : “general-purpose visual identity for a broad set of open web technologies, including HTML5,CSS, SVG, WOFF, and others”… doh ! Back to the drawing board then.
Oh well ignoring all that noise, there’s only the small matter of reading through over 900 pages of specification(s) .
Facing up to IT 