OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web Simulator from Intel

No Gravatar

I gave Intel‘s sponsored session at OSCON 2012 today. OSCON happens right here at home in Portland, OR, enabling the Intel folks to bounce around the sessions and the ever-important hallway track. My talk was Design and Debug HTML5 Apps for Devices with Rapid Interface Builder (RIB) and Web Simulator. I introduced and demonstrated 3 open-source projects recently released by Intel’s Open Source Technology Center, where I am a manager. My talk title was “HTML5 Apps for Devices” and not “Mobile Devices” because I was talking about how difficult it can be to debug Web apps on any kind of consumer device. Our new open-source tools enable easier UX development and debugging for smartphones (of course), but also for TVs and automotive devices.

The purpose of the OSCON session was to teach developers how to build UI for and debug HTML5 apps for mobile and other consumer devices using Rapid Interface Builder (RIB) and Web Simulator. RIB is a browser-based design tool for quickly prototyping and creating jQueryMobile Web apps for mobile devices and desktops. RIB generates HTML5 and JavaScript that can be imported into your IDE of choice to complete the app. Web Simulator extends Google Chrome developer tools to enable running and debugging web APIs for mobile platforms on the developer’s desktop system. Web Simulator allows you to simulate accelerometer and other sensor data, incoming and outgoing calls, geolocation events and battery status and other mobile device events in your Web app with fine-grained control over events. Additionally, I demoed a few of our open-source HTML5 casual games, sample apps made available to the community to teach the new syntax in HTML5.

Happy to say that the house was full for my talk, and I stayed afterward to answer questions from developers from private companies and governmental entities who are interested in integrating HTML5 into their product offerings. If you were in the audience, thanks for stopping by to see what’s new with HTML5 at Intel. If you didn’t catch the session, my slides are embedded below and a video is coming soon. The session was hands-on so the slides are just a summary of the demo goodness.

If you attended, please leave me feedback here or on my SpeakerRate profile. Thanks!

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

The Evolving Mobile Ecosystem and MeeGo – talk at Portland MeeGo Network

No Gravatar

I spent this evening with colleagues at Portland MeeGo Network at Kells in downtown Portland, OR, where I gave a brief introduction to the mobile software and hardware ecosystem and especially, how MeeGo fits into the picture. MeeGo is a Linux-based, open-source OS for mobile and embedded devices. MeeGo exists in the market today in netbooks and in-dashboard entertainment devices. MeeGo recently released a UX stack for tablets. My color commentary isn’t captured in the slides. The audience participation was my favorite part – thanks for the lively hour.

Do you have a MeeGo network in your city? There are local MeeGo developer networks worldwide where you can learn about MeeGo, see it running on devices and try your hand at writing MeeGo apps.

If you attended, please leave me feedback here or on my SpeakerRate profile. Thanks!

VN:F [1.9.22_1171]
Rating: 3.5/5 (2 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

How to Customize the MeeGo Tablet UX – Session from MeeGo Conference 2011

No Gravatar

With my Intel product planner hat on, I spoke at MeeGo Conference 2011 in San Francisco, CA this week to discuss how to customize the open-source MeeGo Tablet UX. I covered three new APIs in the tablet UX project and how they are used to change the look-and-feel and behavior of the MeeGo OS on tablets. Attendees learned about the Panels API, the Content API and the Share API. We also discussed how to change the visual theme of a tablet without making any code changes. My slides are below.

If you attended, please leave me feedback here or on my SpeakerRate profile. Thanks!

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

HTML5 and the Mobile Web

No Gravatar

HTML5 is the next major revision of HTML. It’s a really big deal, especially for mobile browsers and on-the-go Web users. If the main features of the latest HTML5 draft specification are present in the final version, HTML5 will standardize many killer use cases for Mobile Web browsing that were previously implemented using proprietary APIs or ad-hoc methodologies.

Killer HTML5 Features for Mobile

HTML5 is great news for the mobile ecosystem. Mobile users get richer Web applications and improved usability. Mobile browsers reclaim the rendering of rich Web content from third-party plug-ins. Mobile developers get testable, cross-platform and standards-based interfaces for content development.

The new features of HTML5 standardize use cases and technologies that are common in smartphone-optimized Mobile Web applications. In today’s Mobile Web of XHTML-MP (pdf) or HTML 4 documents, these killer features are implemented using proprietary device and browser APIs. With HTML5, advanced Web application features are available in all mobile browsers supporting the markup language, using the same standard syntax and displaying the same standard behavior.

Mobile Web applications using HTML5 can natively embed audio and video, incorporate the user’s geographic location and display interactive Flash-like animations on a 2D canvas. Mobile Web applications in HTML5 can also respond to coverage outages by caching external dependencies for offline Web browsing and locally caching data until connectivity is restored.

HTML5′s best features for mobility are location awareness, canvas animation, persistent storage, offline application caching, improvements to the semantic structure of Web documents and native audio and video controls. Let’s look at each of these features in detail.

Location Awareness in HTML5

HTML5′s Geolocation API makes the mobile device’s geographic location available to a Web application. In the past, obtaining device location was only possible using proprietary JavaScript extensions to JavaScript or server-side integration with a mobile operator API. The API allows one-off location queries and repeated location updates by registering callback functions.

Here is an example of the HTML5 geolocation API used to obtain a single update to the user’s position:

function updatePosition(position) {
// Latitude and longitude are available as member variables
var myLatitude = position.coords.latitude;
var myLongitude = position.coords.longitude;
}
// Request the geographic position.
// This method calls back once to the above updatePosition() function.
navigator.geolocation.getCurrentPosition(updatePosition);


Here is an example of the API used for repeated location updates:

function updatePosition(position) {
// Latitude and longitude are available as position.coords.latitude and position.coords.longitude
}
// Request repeated updates.
// This method calls back repeatedly to the updatePosition() function
// until cancelled using clearWatch(), below.
var watchId = navigator.geolocation.watchPosition(updatePosition);
// Cancel the geographic position updates.
function cancelPositionUpdates() {
navigator.geolocation.clearWatch(watchId);
}


2D Canvas Animation API in HTML5

New <canvas> element and JavaScript 2D Canvas API allow two-dimensional drawing, graphics and animations. Cross-platform games become possible in mobile browsers. Reminder: Script execution impacts battery life on mobile devices.

Here is an example of a 400×400 canvas element:

<canvas id="myCanvas" width="400" height="400" />


And here is an example of the 2D Canvas API used to draw inside the canvas:

// Obtain is a reference to a <canvas> element
var canvas = document.getElementById('myCanvas');
// Obtain a context used to draw
var context = canvas.getContext('2d');
// Clear the canvas
canvas.setAttribute('width', '400');
// Draw an image on the canvas, 'myImage' is a reference to an existing image element.
// Image is drawn at position (10, 10) with width of 100 and height of 50.
canvas.drawImage(myImage, 10, 10, 100, 50);
// specify a CSS color used to fill drawn elements
context.fillStyle = 'rgb(255, 0, 0)';
// Draw a red rectangle on the canvas
context.fillRect(0,0,50,50);
// Clear the canvas
canvas.width = canvas.width;


Web Storage API in HTML5

The Web Storage API allows documents to persistently store data in a mobile browser. Mobile browsers can write data in one browsing session and read it in the next session.

Offline Application Caching in HTML5

HTML5 documents use a manifest to list all dependent external resources (i.e. CSS files, JavaScript libraries, etc.). Mobile browsers use the manifest to cache an entire Web application for offline use, allowing mobile users to interact with a Web app while roaming in and out of coverage areas.

Semantic Document Structure in HTML5

New <header>, <footer>, <nav>, <section>, <article>, <figure> and <aside> elements declare the logical structure of a Web document. Structural elements make it easier for mobile browsers to navigate document components and display partial documents.

Native Audio and Video Controls in HTML5

New <video> and <audio> elements embed multimedia into a Web document without using third-party browser plug-ins. Mobile browsers may natively control multimedia display, codecs and user interfaces.

HTML5 Supplants XHTML

HTML5 supplants the XHTML 1.0 specification. In HTML5, XHTML is re-defined as a set of syntax rules and is no longer an independent markup specification. HTML5 can be expressed using either the strict syntax rules of XML or the looser syntax of HTML, which tolerates unclosed tags. Both formats are accepted as HTML5. This sensible change restores the unity of markup language functionality while allowing the mobile developer or designer the flexibility of choosing precise or lenient syntax. Slackers, you can continue to slack off in HTML5.

Motherhood, Apple Pie and HTML5

Mobile pundits tout HTML5 as the antidote to practically every problem in Mobile Web development. HTML5 is indeed a great leap forward in standardizing the advanced features of Web browsers. Its new elements and APIs unlock consistent implementations of rich Web application behavior. Unfortunately, HTML5 will not lessen or extinguish several sins of Mobile Web development, including:

  • Fragmentation: Too many vendors implement mobile browsers, creating a fragmented marketplace and forcing developers to adapt Web content to play to browser strengths and avoid browser weaknesses.
  • Browsers Bugs: As with any Web standard, HTML5 features may be incompletely or incorrectly implemented in a mobile browser.
  • Rushing to Market: Mobile browsers may support HTML5 too quickly, implementing features or syntax that end up changed or cut from the final standard.
  • Forgetting the Mass Market: Many popular Mobile Web sites use simple markup to quickly provide snackable chunks of relevant information to users. Upgrading these Mobile Web sites to use HTML5 (without implementing content adaptation) could cut off access to millions of users with older, Web-accessible mobile browsers.

HTML5 on Smartphones and Featurephones

Of course, the promise of HTML5 is only realized on mobile devices with modern, updatable Web browsers. As of this writing, iPhone, Android and Palm smartphones all implement portions of the HTML5 specification. Smartphones provide an excellent platform for rolling out HTML5 applications to savvy Mobile Web users. However, the majority of mobile subscribers still use non-smartphone devices with no ability to update the browser or operating system. Developers must use content adaptation principles to include advanced HTML5 elements only the target mobile browser is known to support HTML5. Content adaptation ensures a satisfactory Mobile Web experience for all mobile users.


This post is adapted from a short section on HTML5 and mobility that I contributed to Janine Warner‘s upcoming book, Mobile Web Design for Dummies.



VN:F [1.9.22_1171]
Rating: 3.5/5 (4 votes cast)
VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Switch to our mobile site