Posts Tagged ‘mobile internet browsers’

The end of Apple?

February 2, 2012

We are clearly in the web age an era that has turned everyone into readers and publishers of free content. In this era we have seen the rise of open source, free software and the move to software and services freely available in the cloud.

Yet in the “free age”, Apple maintain a huge client base locked into its proprietary and closed hardware, operating systems and stores. When Steve Jobs returned to Apple, even the great Bill Gates proclaimed that the world had changed, and that Apple would not survive with Steve Jobs maintaining the company’s control over platforms from end to end.

Despite this Apple is a huge success. Is it likely to last?

As a techie, I’d hope not, because we do want to be able to upgrade our hardware, we want the option to use any suppliers’ parts and we want the same to be true of our software. Do we care what the hardware looks like as long as it’s fast and powerful, not really.

However as a consumer, too much choice is not necessarily a good thing. As a consumer, we are in a world where things get replaced rather than fixed or upgraded. For the majority style is every bit if not more important than features, and customer experience does matter.

How quickly and easily I can use my device has become more important than whether it has all the latest and best features. Going back to one store is easier than have to search several for apps and music.

Apple started with some engineering innovation, and when Steve Jobs was first ousted focused heavily on engineering; this was its downfall in the late eighties. However with the return of Steve Jobs, and his partnership with Jonathon Ives, a return to a focus on customer experience and design revived the ailing technology company.

So although it pains me to see Apple thrive in such a closed environment they really do highlight that style, ease of use and the overall customer experience really does matter to consumers. Hence I would not forecast the end of Apple for some time in the near future unless it loses its way again to “engineering”.

HTML 5 makes the browser smarter

January 26, 2012

The unsung hero of the web has always been Javascript, without which the standards-based web would be completely static. Javascript enables functionality to be executed in the browser, and has been used to create all sorts of effects otherwise not possible with HTML alone.

In the early days, Javascript implementations weren’t entirely standard, requiring developers to have to write variants for different browsers; this isn’t really an issue any more.

For applications, developers will either use libraries or develop their own validation routines. This Javascript code adds significantly to the amount of code downloaded.

With HTML5, developers will need to write less Javascript, as the browser provides features to do things for itself rather than rely extra scripting.

Validation is the main area of improvement. HTML5 now provides a number of new validation features such as mandatory checking, type checking, range and field length validation. The validation is done within the browser, and developers can opt to decide how to process errors.

Obviously validation has to be repeated on the server for security, to ensure that data hasn’t been hacked in the browser or in transmission. This then means that validation has to be maintained in two places and kept in sync.

HTML5 also provides a number of new input field types such as tel, email, color, datetime. This empowers the browser, by applying it to display a date picker, or a colour chooser for example. More importantly for mobile applications it would allow the browser to show an appropriate keyboard layout e.g. a numeric layout for tel, and an alphabetic keyboard for email type.

There are also a number of new attributes which previously required Javascript such as autocomplete, placeholder and pattern which will prove very useful.

There will be some organisations that will not want the browser to affect their carefully designed user experience; for these people the answer is simple, just don’t use the new features.

For the rest, you will enjoy having to write less Javascript for HTML5 browsers, but of course you will still need to have backwards compatibility for non-HTML5 browsers which will rely on Javascript.

HTML5 Audio and Video comes as standard

June 26, 2011

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 !

Further reading:
http://dev.w3.org/html5/spec/Overview.html#media-elements

HTML5 gets fun, without a plug-in in sight

June 16, 2011

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 !

Make sure you use a current browser supporting HTML5 features like Canvas to view / play these.

http://www.google.com/pacman/
http://www.effectgames.com/effect/games/crystalgalaxy/
http://mugtug.com/sketchpad/
http://www.kevs3d.co.uk/dev/asteroids/
http://canvasrider.com/
http://www.benjoffe.com/code/games/torus/
http://agent8ball.com

http://www.beautyoftheweb.com/

HTML5 gets a database

June 9, 2011

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.

http://www.w3.org/TR/webdatabase/

http://www.w3.org/TR/IndexedDB/

http://hacks.mozilla.org/2010/06/beyond-html5-database-apis-and-the-road-to-indexeddb/

http://trac.webkit.org/export/70913/trunk/LayoutTests/storage/indexeddb/tutorial.html

HTML5 knows where you are!

May 12, 2011

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 !

http://dev.w3.org/geo/api/spec-source.html

HTML5 takes on the cloud.

April 28, 2011

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.

http://www.w3.org/TR/IndexedDB/

http://dev.w3.org/html5/webstorage/

http://www.w3.org/TR/2011/WD-html5-20110113/offline.html#offline

HTML5 What’s in it?

April 21, 2011

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?

http://www.w3.org/html/logo/

Does HTML5 mean the end of Silverlight: Yes

March 31, 2011

If you’re like me, you might have a dream that surfers will soon not have to rely on plug-ins to enjoy browsing the web. For fellow dreamers, the forthcoming and latest round of browser wars might lead to a better web experience rather than yet another plug-in based nightmare.

Microsoft has recently had to grin and bear the pain, while its dominant Explorer browser has seen its market share attacked by a series of platforms, including Mozilla Firefox, Apple Safari – and most notably – Google Chrome. With market share now hovering at round 60% (see further reading, below), it’s almost as if the top guys at Redmond have suggested that enough is enough.

The result is a return of the browser wars, with Microsoft set to preview the final beta of Internet Explorer 9 (IE9) in September. Chrome is clean, simple and fast – and expectations will be that IE9 provides a much quicker browsing experience.

Initial signs look good. Graphics performance is enhanced and hardware is accelerated. But the real story is the heavy use of HTML5, showing that researchers in Redmond also feel the next generation mark-up language is the best way forward for development.

“The future of the web is HTML5,” suggested Dean Hachamovitch, the general manager for Internet Explorer in a blog post earlier this year (see further reading). With Apple and Google also throwing their weight behind HTML5, much debate has rightly centred on the tricky situation facing Adobe’s video plug-in Flash.

But Microsoft’s support for HTML5 potentially creates another set of circumstances and another high profile conflict. This conflict surrounds Silverlight, a web framework that integrates multimedia and graphical elements in a single environment.

More intriguingly, it is Microsoft’s own framework – and, since April 2007, it has formed the backbone of the provider’s presentation framework. So, where does Microsoft’s support for HTML5 leave Silverlight? That, for web developers, is the key question.

Online publication The Register recently referred to the clash as “The Silverlight Paradox”, suggesting that a high quality and HTML5-ready IE9 will surely make many of the features of Silverlight and Flash redundant (see further reading).

Such a paradox, however, is fraught with complications. IE9 might look like it provides new fuel for Microsoft’s browser battle, but the true level of optimisation will not be clear until web developers get their hands on beta.

As The Register article suggests, legacy requirements mean the use of plug-ins will persist for many years – even if IE9 delivers everything it promises. But the move towards HTML5 shows that the captive strength of plug-ins is waning and businesses must develop web platforms with capability across all levels, from the desktop through to the mobile. The new web experience is emerging.

Further reading:

http://arstechnica.com/microsoft/news/2010/03/firefox-may-never-hit-25-percent-market-share.ars

http://blogs.msdn.com/b/ie/archive/2010/04/29/html5-video.aspx

http://www.theregister.co.uk/2010/08/05/inside_ie9/

Does HTML5 mean the end of the road for Gears, HTA and Flash?

March 10, 2011

Web standard HTML5 contains loads of great features, from video playback to drag-and-drop. But the best bit, and currently one of the least talked about elements, might be the capability to run apps offline.

The normal web experience is hindered by connectivity. Users can typically access web apps while they have a connection to the internet. Once offline, individuals lose access to email, calendar or notes. There are, of course, workarounds. Google Gears, for example, allows users to navigate compatible sites offline and synchronise when back online.

Microsoft HTML Applications (HTA), meanwhile, is a Microsoft Windows formalisation that provides a web-like experience offline. And Adobe Flash can also be run offline, allowing users to run Flash-based content.

Such workarounds are OK but they are also a bit messy. People want the same experience online or offline; they want to get hold of – and manipulate content – regardless of location and they don’t want to be hindered by platform specific technologies or plug-ins.

HTML5 provides that standardisation. Its two–pronged approach re-connects the user through an SQL-based interface for storing data locally, and an offline cache that helps ensure apps are always available (see further reading, below).

With regards to availability, HTML5’s application cache mechanism provides the ability to have a fall back page for rendering pages when offline. It also provides a means to update cache dynamically. The key, here, is client-side management.

And without wanting to bang my own drum too loudly, it is a rhythm I have been hinting at for a long, long time. I blogged two years ago (see further reading) about client-side management as a method for keeping data in the browser, rather than the server, and as means to reducing memory and processing requirements.

“If only it was supported as standard by the browser rather than having to use hidden fields,” I concluded – and now that day is fast approaching. HTML5 creates a standards-based method for creating local apps that run offline.

As mentioned earlier, HTML5 also provides the ability to store data locally through a client-side SQL database. A series of apps could potentially work with this database, providing a new level of accessibility and integration.

The total approach represents a huge step forwards for web development. It also signals that the end is nigh for proprietary workarounds like Gears, HTA and Flash. HTML5 is the future and web developers simply must get with the program.

Further reading:

http://www.w3.org/TR/offline-webapps/

http://blogs.computerworlduk.com/facing-up-to-it/2008/07/client-side-session-management/index.htm