Design and Debug

HTML5 Apps for Devices

with RIB and Web Simulator

Gail R. Frederick

Intel Corporation

Open Source Technology Center OSCON 2012 - July 19, 2012

INTEL CORPORATION 2 SSG System Software Division

Agenda

Learn how to develop and debug HTML5 apps for mobile devices using

new open-source projects from Intel.

Rapid Interface Builder: Quick prototyping of Web app UX

Web Simulator: Debug mobile Web apps in Chromium

Sample Web Apps: Dozens of sample apps to help you learn HTML5

Learn how you can get involved in these projects.

Learn what Intel is doing with Web technologies and why.

Hey … isn’t Intel a hardware company?

INTEL CORPORATION 3 SSG System Software Division

Introductions

Who am I? Gail Frederick (gail.r.frederick@intel.com)

• Manager in Intel’s Open Source Technology Center (http://01.org)

• Enthusiast for standards-based mobile Web development

• Author of Beginning Smartphone Web Development in Jan 2010

INTEL CORPORATION 4 SSG System Software Division

Introductions

Who are you? By a show of hands, have you …

• Developed a desktop Web site with HTML5?

• Developed a mobile Web site with HTML5?

• Developed a packaged HTML5 app (WGT or CRX)?

• Developed a hybrid app (contains both native code and HTML5)?

INTEL CORPORATION • SSG System Software Division

Rapid Interface Builder (RIB) http://01.org/rib/

INTEL CORPORATION 6 SSG System Software Division

Rapid Interface Builder Project (RIB)

• Browser-based UI design tool for Web apps using jQueryMobile

• Drag-and-drop UX with layout view, code view and app preview

• Export resulting HTML5 and JavaScript code as ZIP …

• … import into your IDE of choice and finish the app!

• Runs on Chrome/Chromium browsers

• Try RIB now at http://01.org/rib/online

INTEL CORPORATION • SSG System Software Division

Web Simulator http://01.org/web-simulator/

INTEL CORPORATION 8 SSG System Software Division

Web Simulator Project

• Lightweight tool for running and debugging mobile Web apps

• Sends platform events and messages to Web apps • Sensors, orientation, geolocation, calls, messaging, battery, etc.

• Simulates platform APIs for HTML5 and most of Tizen 1.0 Larkspur in Chromium

• Works with local and server-based Web apps

• Runs in Chrome/Chromium and Tizen 1.0 Larkspur SDK

• Try Web Simulator now at http://01.org/web-simulator/online

INTEL CORPORATION • SSG System Software Division

Sample HTML5 Web Apps http://01.org/html5webapps/

INTEL CORPORATION 10 SSG System Software Division

HTML5 Web Apps Project

• Showcase of sample Web apps to demonstrate new features in

HTML5 and CSS3.

• You can learn tips & tricks for HTML5 and CSS3 from these apps.

• Technology resource for new Web developers.

• Educational apps and games released to date.

• Apps run in Chrome/Chromium, Web simulator and Tizen emulator

and devices.

• All Web apps released to date use the Apache 2.0 License.

INTEL CORPORATION 11 SSG System Software Division

HTML5 Web Apps and Highlighted Web Features

Annex Bubblewrap Counting Beads Flashcards Go Hang On Man

DOM Manipulation,

Game AI in JS

CSS3 Box Model,

CSS Manipulation,

jQuery

jQuery animations,

CSS3 animations

Chromium i18n API,

JavaScript classes

WebKit animations

and transforms,

WebKit scrollbar

customizations

Computed styles,

local storage,

JSON read/write,

image tricks

Mancala

Memory Game

for Older Kids Memory Match Run Rabbit Run Sweetspot

CSS positioning,

CSS animations,

jQuery UI

Local storage,

WebKit 3D transforms,

WebKit animations

JavaScript

manipulation of CSS,

WebKit animations,

CSS inheritance

CSS3 Selectors,

document fragments,

Local storage,

Event listeners

Predefined CSS

animations,

JavaScript classes and

scoping techniques

INTEL CORPORATION • SSG System Software Division

Intel and Web Technologies

INTEL CORPORATION 13 SSG System Software Division

Why is Intel involved with Web technologies?

• We believe in the transformative power of open, horizontal technologies.

• Web workloads are demanding – we like that!

• Whatever the programming paradigm, language or workload, our job is to make sure it runs best on Intel Architecture.

• When to use HTML5/CSS/JS vs. Java vs. native – confusing to our customers and developers.

• Intel has one of the largest developer outreach programs in the world.

• We measure, analyze, try it ourselves, then aim to be a trustworthy advisor on the important technical issues faced by developers.

INTEL CORPORATION 14 SSG System Software Division

Recent Intel Work in Web Technologies

• W3C: Added multi-channel support and otherwise influenced the Web Audio specification.

• WebKit: Feature and performance for Touch, Canvas, WebGL, Web Socket, Web Worker, File API and other subsystems.

• Chrome/Chromium: Helped Google whitelist almost all Intel GPUs

• Android: Android on IA, Chrome-for-Android on IA, HW-accelerated Android emulator for IA

• Apache Cordova / PhoneGap: Cordova implementations for Tizen, Windows 7 then Windows 8.

• Tizen: HTML5 application API for smartphones, TVs and automotive devices

INTEL CORPORATION 15 SSG System Software Division

Intel Likes PhoneGap (and the Apache Cordova project)

• Cordova (among other things) is a great way to try new APIs for web

apps.

• Contributing Tizen OS implementation of Cordova.

• Ramping work on Cordova for Windows 7, then Windows 8.

• Memo to Intel groups that want to expose platform features.

• “If you can expose it through PhoneGap, then please do.”

• Intel sponsoring PhoneGap Day on Friday here in Portland!

• Our Cordova work is centered in Montpellier, France – stop by and

say “Bonjour”!

INTEL CORPORATION • SSG System Software Division

Backup

INTEL CORPORATION 18 SSG System Software Division

How to Get Involved with Intel OSS Projects

• Most Intel open-source projects are hosted at http://01.org

• Rapid Interface Builder

• Web Simulator

• Sample HTML5 Apps

• Centralized source code repos, feature/bug tracking, blog, wiki,

mailing lists and other community features….

• Create an account and start collaborating!