HTML5_ A GREAT MOBILE INTERNET CATALYST_ by jlhd32

VIEWS: 27 PAGES: 7

More Info
									                            Rivium 1e Straat 9, 2909 LE, Capelle aan den IJssel




   HTML5, A GREAT MOBILE INTERNET CATALYST?
Introduction
You may have noticed some increasing attention on the Internet about HTML5. You may also have read
that companies like Google & Apple are adopting HTML5 with initiatives like a Mobile Google E-mail
client written fully in HTML5, iAd in HTML5, or YouTube using HTML5 video. So what does it all mean,
what can we do with HTML5, and more importantly: what does it mean for the Mobile Internet?

HTML5 is the proposed next standard for HTML 4.01 and XHTML 1.0 by the Web Hypertext Application
Technology Working Group (WHATWG) founded by individuals of Apple, the Mozilla Foundation, and
Opera Software. The HTML5 standard has still status Draft and the specification gets updated
frequently. Since 2009, HTML5 support in Safari, Firefox, Opera and Chrome browsers is increasing
noticeable.

With the continuing growth of the Smartphone market share (iPhone, Android, Nokia) HTML5 support
on the Mobile Internet is also becoming a fact, resolving constrains that block Mobile Internet
innovations today.

The thinking behind HTML5 is to offer developers a complete suite of markup and API’s that allow them
to basically build ‘any’ rich internet application using HTML5, CSS3 and (fast) Javascript. It is especially
this thinking that makes the arrival of HTML5 to the mobile platform really something you don’t want to
miss out on.

So what features of HTML5 are of special interest on the Mobile Internet, and moreover, what can we
already use today, and what can we expect?

HTML5 video & audio
HTML5 allows developers to embed audio and video components into their rich internet application
pages. In HTML5 you can fully separate all controls (e.g. play, pause, stop, etc.) from the audio or video
play area which allows better looking pages, but also allows synchronized control of multiple video
area’s with a single control. The video API allows developers to define content functions on the video
data, like changing the lighting, add 3D features, or add face or object recognition. Providing this level of
control and access will allow developers to create new and innovative mobile applications that can
control and customize the video data into the mobile context, for example combine geo location, device
camera information and server video information to present a true localized and personalized piece of
video content.



                                                                                                            1
Today there are still limitations on the mobile platform with HTML5 video & audio, for example the
iPhone does support the <video> element, but is not able to truly embed the video screen data into the
same mobile web page and offer the control and access HTML5 defines. Instead it shows the poster
image and will open the video in the QuickTime player. On the Google Nexus One, HTML5 video support
seems to be absent, the <video> element results into an unplayable poster image of the video.

Improved HTML5 video and audio support like embedding the video and higher frame rates should soon
become possible on the iPhone 4G and Google Nexus Two which both should get a faster ARM CPU (e.g.
Apple A4 processor) and faster video acceleration.

Mobile browsers still will limit and fragment the support of video and audio codec capabilities. For
example Apple didn’t choose to support the open source Ogg Vorbis/Theora codecs, but instead choose
to support aac, mp3, wav and H.264 on their iPhone, iPod and iPad. In contrast, Android devices support
the patent free Ogg audio and video format. So when offering a full mobile HTML5 video service you
would need to recode the video and audio content several formats.

HTML5 <video> in detail
The <video> element from the new HTML5 standard is supported on some more capable Smartphone
devices. Although the <video> element itself is supported, all features that come with the <video>
element might not be supported or might have been implemented ‘somewhat’ different per mobile
device. These variations also control the way you can deliver video data to a mobile device, and form an
important technical factor that you need to consider when you want to create new video experiences
using HTML5.

HTML5 <video> control
On all, except the iPad, the <video> element does not yet present a “true” embedded video experience
in the mobile internet page. Instead, in the page a placeholder is shown, and when the video is started,
a separate window from the video player will start, hiding the current mobile internet page, with all
potential new features such as separated video controls. The image below shows such a placeholder.




On the iPad, where the video does play embedded in the mobile internet page, it is not possible to
start/control multiple video’s (parallel video), nor obtain access to the video data for example to copy it
to a <canvas> element to implement all sorts of creative effects on video data as shown in many demo
Internet HTML5 sites. However on the iPad it is possible to create a video player to your own taste
having basic controls like play, pause and show the position in the video with a timer or position data
and control the source of the video with a picklist for example.



                                                                                                              2
The following table shows some HTML5 feature support on some of the latest devices.

                                                      HTC
 Attribute                    iPad   iPod   iPhone    Legend
 play()                       Y      Y      Y         Y
 pause()                      Y      Y      Y         Y
 seeking (event)              Y      Y      Y         Y
 timeupdate (event)           Y      Y      Y         Y
 canplay (event)              Y      Y      Y         Y
 play (event)                 Y      Y      Y         Y
 src                          Y      Y      Y         Y
 currentTime                  Y      Y      Y         Y
 webkitSupportsFullscreen     N      N      N         N
 volume                       N      N      N         N
 muted                        N      N      N         N
 true embedded play           Y      N      N         N
 copy video to canvas         N      N      N         N
 parallel video               N      N      N         N
 autoplay                     N      N      N         N


Apple chooses also not to implement the auto play attribute to prevent unsolicited downloads over
cellular networks. The user always has to start the play() action.

HTML5 Dynamic Imaging with Canvas
The new HTML5 Canvas element is certainly welcomed as an additional alternative to Flash Lite to
achieve full media reach. Combined with SVG and javascript, developers are given a screen with the
possibility to manipulate pixels in any way they would like. It isn’t surprising that Google employees took
up that challenge and ported the open source version of the game Quake II to HTML5. Today the current
mobile CPU restrictions won’t allow you to run 3D games like that at a sufficient frame rate, but its only
a matter of time. The Google Nexus One has for example a 1 GHz processor, which should be sufficient
to create an acceptable frame rate. Also more HTML5 API’s would have to be implemented in the
Safari/Webkit browser such as the WebSocket API to communicate to the Quake Server.

Also the ability to combine Canvas manipulation abilities with the HTML5 video capabilities leads to
stunning effects that can be created on the fly in your browser, where normally more complicated video
production software would be required.

Back to today, we already see Mobile HTML5 Game shops opening, offering a wide range of low end
games like Tetris, Asteroids and Space Invaders in a somewhat screen customized and slimmed way.
Sites like that could become a very easy, convenient, open alternative to the today immense popular
concept of App Stores - without the vetting process. And on the iPhone and iPad it will be the only
alternative as it appears that Flash won’t be supported on the Iphone for a while.




                                                                                                         3
HTML5 API’s & Mobile
When all the above HTML5 capabilities are mixed with the proposed API’s the full power of HTML5 on
the mobile platform will be quite evident. For example, the Geo Location API has been proposed and has
been implemented already in several mobile devices, such as the iPhone allowing HTML5 developers to
have direct access to the GPS coordinates via the browser, and use these coordinates. But that is not all.
The plan is to create API’s to every device and component available on the mobile handset, for example
a Capture API is defined that would be fully capable of capturing audio, images and video data from the
phone’s camera. An API like that would open up yet another wide range of mobile applications in the
browser from video conferencing, voip and even real-time augmented reality applications. In fact
Google is giving us a peek preview of the possibilities with their GPS connected Google Maps & Street
view. Besides these API’s more API’s have been defined such as a Contacts API that provides access to a
unified address book.

HTML5 Local Storage
When creating functional applications the storage of session and/or permanent data is of vital
importance. Without local storage it would still be possible to store session data in cookies, and link all
other transaction data to a server side database like MySQL (or even squeeze all data in a cookie like
some developers love to do), however ubiquitous access to a MySQL server place is not always an
option, and might not even be possible when a connection is not fast enough, or even failing. Also in
some other cases local storage can be a very convenient way to temporary store (cache) data when a
web service does not allow continuous and frequent access due to usage policies like social network
API’s such as Twitter’s.

With the HTML5 Web Storage API and Web SQL Database API it becomes possible to store the
application data as key/value pairs, or even as a normalized relational database table, accessible with
SQL statements (on the local device) and make it available for search, retrieval and update at any time.
Having a relational SQL database around will be very, very convenient to application programmers who
are very well know to SQL. Also having SQL available would allow the porting of any existing open source
application, like those can be found on SourceForge.

Besides the regular local data storage for data processing applications the local storage capabilities will
extend the potential of personalisation which is still an important distinctive property of mobile
applications today

Seeing that Google is phasing Out Gears - Opting to support HTML5 instead, is also a clear sign the
HTML5 Local storage capabilities would be sufficient to provide in all the local storage requirements
applications might have.

HTML5 Drag & Drop
With HTML5 every element in a page can become a subject to drag and drop. HTML5 allows developers
to define elements that should be subject to drag simply trough an attribute draggable="true". Also
events like drag start and javascript API’s like dataTransfer allow developers to implement the required
code to execute the action that is meant by the user dropping a dragable element. For Mobile Internet,
Touch devices, intuitive Drag & Drop interaction plays an important role in the usability and integration
of the application.

                                                                                                              4
HTML5 Form Elements
HTML5 defines an additional set of form input element types, like date,
time and email to name a few. Using this type of information, the
browser will be able to customize the user interface with the goal to
simplify the interaction. For example the iPhone will automatically include
the @ sign in the screen keyboard when it processes input for an email
type input. Data input types will automatically result in the well known
calendar control allowing to navigate to the right date, and simply select
the day – all “out-of-the-box”, saving developers time to implement features like this.

HTML5 Web Workers
With Web Workers application developers can start processes in the background or implement some of
the user interaction in an asynchronous way, allowing for a much better performance of the user
interface, speed up some data processing by parallel processing etc. Currently there are no mobile
device browsers that provide Web Workers, but with multi core processor devices upcoming, it would
totally make sense to make this feature also available in the mobile browser.

HTML5 Structure and CSS3
HTML5 and CSS3 will bring improved markup structure and style capabilities; many of these
improvements you might not notice in the end result, as web developers have been applying mind-
boggling workarounds already using its predecessors. However, HTML5 and CSS3 will make the
structuring and creating layout easier, for example creating rounded corners is just added as a standard
feature of CSS3 which is great news for web designers. It will allow them to become more productive,
and get less distracted by having to come up with workarounds in the older HTML and CSS all the time.
Also, as things get more structured, changes and maintenance will become somewhat easier too.




                                                                                                           5
HTML5 Support on Mobile today
Clearly HTML5 has all promises to change the Mobile Internet landscape and lift important blocking
factors today that web developers encounter when they develop web technology based applications for
a Mobile browser.

That HTML5 support is moving with an increasing speed is becoming evident when we investigate the
level of functional HTML5 support that is found on sample of current smartphone that are out there
today. The test shows that you should not expect too much from some older devices from the past
running older versions of Safari and WebKit.




To establish the level of support of a PC or Mobile browser, tests have been executed at the DOM and API
level, to check if HTML5 support could be detected for audio, video, the number of codecs, geo-location,
offline web application store, Workers, section elements, grouping content elements, text-level semantic
elements (e.g. time), Form Input, Elements and User interaction. The test does not show the effect of
current limitations as indicated in the article, like the fact that the video element on the iPhone is
actually not yet showing a fully embedded and controllable video stream.


                                                                                                      6
HTML5 Yes!
It might be a bit too soon to start implementing full HTML5 compliant Mobile Internet sites. But nothing
would stand in the way to start using HTML elements and features like the Video, Canvas or the Geo
Location API where support already can be found. HTML5 still won’t totally solve the mobile device
fragmentation. However HTML5 will act as a strong catalyst to increase converge of the market, as it
sets a new standard with many features, and the first signs indicate that this standard is moving much
faster than any previous attempts made by the W3C alone, thanks to the WHATWG.

The natural effect of this increased speed will be that some HTML5 specifications, newly introduced
elements and API’s might change faster than you would like, so when development budgets are low and
under pressure, and you don’t want to be a fist mover, you might want to time your HTML5 adventure,
and perhaps wait somewhat on a more stable specification.

To get the most out of your mobile site, achieve the widest reach and get the best experience on each
mobile device you would still need specialized solutions that can adjust media rendering based on the
device and/or browser recognition and are able to adapt the level of HTML5 features based on the
current available browser support.

HTML5 Demo
If you would like to experience some HTML5 features on your mobile device today, you can visit us at:
http://html5demo.momac.net . We have collected a number of HTML5 features such as video and
audio. You can also do a HTML5 score test to check out how well your device supports HTML5.



Alex Rutgers is the Head of Technology within www.momac.net that specializes in partnering with
media companies and mobile operators to create powerful mobile internet sites and profitable mobile
operator portals. Follow MoMac on Twitter #momac




                                                                                                        7

								
To top