Html5 Article En

©Momac 2010. Some rights reserved June 2011

HTML5, A GREAT MOBILE INTERNET CATALYST? A practical guide for all mobile portal owners.

Created by http://www.momac.net http://twitter.com/momac

©Momac 2010. Some rights reserved. 2

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? 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 web sites and profitable mobile operator portals. Follow MoMac on Twitter #momac

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. 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.


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

Attribute iPad iPod iPhone HTC 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.

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.

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.

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. 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.

Conclusion Improving customer experience is rapidly becoming recognised as the number one priority for mobile operators worldwide, and the subscriber interface, whether mobile Internet portal or application, will play a key role in the transformation to a subscriber-‐centric proposition. By offering subscribers a highly personalised ‘dashboard’ to manage their operator account, combined with access to key mobile Internet products and services, operators can position themselves at the heart of the users mobile Internet experience. Integration into core operator databases and/or SDM systems will deliver intelligence to the customer interface, providing for context and subscriber-‐aware product and service offerings spanning content, voice and data packages and possibly 3rd party products. The CCMI can become the champion of customer experience, enhancing transparency between operator and subscriber, adding value to both. Put simply, what better place is there for a mobile subscriber to manage his relationship with the operator, than via the mobile device itself?

About Momac Momac is a leading provider of mobile interface solutions for mobile network operators. With a comprehensive set of cloud-‐based tools and managed services, Momac enables operators to run highly personalised mobile interfaces that incorporates customer care services, social media and e-‐mail, premium content stores, advertising and messaging in one flexible solution driving customer loyalty and increasing ARPU. Momac’s powerful and innovative cloud-‐based platform mvolve puts control back into operator hands, facilitating rapid changes and site creation without the need for technical resources. Advanced segmentation and CRM capabilities working in tandem with mvolve self-‐care services and sophisticated personalisation systems provide end users with a progressively enhanced customer experience.


Momac Customer Centric Interfaces Momac is able to integrate directly into operator billing and CRM systems, HLRs and third-‐party Subscriber Data Management systems to deliver truly customer-‐centric interfaces. The combination of flexibility in interface design across the entire range of handsets with access to third-‐party content and subscriber data places Momac mobile interfaces at the forefront of the drive towards customer centricity and an improved customer experience. Cutting-‐edge yet extremely flexible, mvolve powers mobile portals of some of telecom’s largest players, including Vodafone, O2/Telefonica, Three, Orange and T-‐Mobile. As the mobile industry changes – most notably in the past 24 months with the spectacular rise of smart phones – Momac has delivered continually enhanced services and products that assist operators to satisfy customer demand. Momac partners with operators to transform their portals into marketing and CRM channels, directly impacting ARPU and retention. As an international company, Momac has offices in London, Rotterdam and Paris but commercially serves more than 20 countries. Follow us on twitter.com/momac or browse http://www.momac.net

Html5 Article En

Documents

Transcript of Html5 Article En