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

  • 5,448 views
Uploaded on

Learn how to build UI for and debug HTML5 apps for mobile devices using Rapid Interface Builder (RIB) and Web Simulator, two open-source tools recently released by Intel. This session dives deep into …

Learn how to build UI for and debug HTML5 apps for mobile devices using Rapid Interface Builder (RIB) and Web Simulator, two open-source tools recently released by Intel. This session dives deep into the feature sets of both Web app developer tools, with demos, and shows you how you can influence the future of these open-source projects.

Rapid Interface Builder, RIB, is a browser-based design tool for quickly prototyping and creating Web apps for mobile devices and desktops. RIB allows a developer to layout UI by dropping widgets onto a canvas and reviewing the UI in interactive preview mode. RIB generates HTML5 and JavaScript that can be imported into your IDE of choice to complete the app. RIB supports jQueryMobile and Tizen widgets and runs on Google Chrome and Chromium browsers.

Web Simulator is a lightweight open-source tool for debugging mobile web applications. Extending the Google Chrome developer tools, it enables 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. It currently supports HTML5 and the Tizen Web APIs.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,448
On Slideshare
0
From Embeds
0
Number of Embeds
10

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Next, DEMO RIB – start from a fresh canvas, drag and drop widgets, export the code and import into Eclipse/Notepad++ to complete app.
  • Next, DEMO the Web Simulator with a sample HTML5 app, a Web page and a mobile app that uses platform APIs.
  • Next, DEMO three of the Web apps and view source to highlight the Web programming techniques.
  • Over 100 patches from Intel in upstream WebKit and Chromium

Transcript

  • 1. Design and DebugHTML5 Apps for Deviceswith RIB and Web SimulatorGail R. FrederickIntel CorporationOpen Source Technology CenterOSCON 2012 - July 19, 2012
  • 2. 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?2 INTEL CORPORATION SSG System Software Division
  • 3. Introductions Who am I? Gail Frederick • 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 20103 INTEL CORPORATION SSG System Software Division
  • 4. 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)?4 INTEL CORPORATION SSG System Software Division
  • 5. Rapid Interface Builder (RIB)http://01.org/rib/ INTEL CORPORATION • SSG System Software Division
  • 6. 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/online6 INTEL CORPORATION SSG System Software Division
  • 7. Web Simulatorhttp://01.org/web-simulator/ INTEL CORPORATION • SSG System Software Division
  • 8. 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/online8 INTEL CORPORATION SSG System Software Division
  • 9. Sample HTML5 Web Appshttp://01.org/html5webapps/ INTEL CORPORATION • SSG System Software Division
  • 10. 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.10 INTEL CORPORATION SSG System Software Division
  • 11. HTML5 Web Apps and Highlighted Web Features Annex Bubblewrap Counting Beads Flashcards Go Hang On Man DOM Manipulation, CSS3 Box Model, jQuery animations, Chromium i18n API, WebKit animations Computed styles, Game AI in JS CSS Manipulation, CSS3 animations JavaScript classes and transforms, local storage, jQuery WebKit scrollbar JSON read/write, customizations image tricks Memory Game Mancala for Older Kids Memory Match Run Rabbit Run Sweetspot CSS positioning, Local storage, JavaScript CSS3 Selectors, Predefined CSS CSS animations, WebKit 3D transforms, manipulation of CSS, document fragments, animations, jQuery UI WebKit animations WebKit animations, Local storage, JavaScript classes and CSS inheritance Event listeners scoping techniques11 INTEL CORPORATION SSG System Software Division
  • 12. Intel and Web Technologies INTEL CORPORATION • SSG System Software Division
  • 13. 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.13 INTEL CORPORATION SSG System Software Division
  • 14. 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 devices14 INTEL CORPORATION SSG System Software Division
  • 15. 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”!15 INTEL CORPORATION SSG System Software Division
  • 16. Backup INTEL CORPORATION • SSG System Software Division
  • 17. 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!18 INTEL CORPORATION SSG System Software Division