• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 WebWorks
 

HTML5 WebWorks

on

  • 2,672 views

Presentación de Jorge del Casar para Device Days 2013 sobre HTML5 y WebWorks.

Presentación de Jorge del Casar para Device Days 2013 sobre HTML5 y WebWorks.

Statistics

Views

Total Views
2,672
Views on SlideShare
1,764
Embed Views
908

Actions

Likes
0
Downloads
14
Comments
0

8 Embeds 908

http://www.blocketpc.com 809
http://www.scoop.it 75
http://abtasty.com 14
http://tools.opoint.com 4
https://twitter.com 2
http://blocketpc.com.mialias.net 2
http://0.gravatar.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Originally presented at BlackBerry 10 Jam by: Adam Stanley (RIM) and Ken Wallis (RIM) Re-formatted for a 45 minute presentation: 35 minutes of content and 10 minutes of Q&A (or live demos) Added overview of custom WebWorks extensions.
  • Talking points: HTML5 is a standard that will continue to evolve for the next 10 years. Its popularity is growing. HTML5 offers native capabilities to Web content (hardware integration and access to device capabilities)
  • Talking points: All of these applications are free for download from App World (as of May 1, 2012).EconomostTwimbow TIFF Lemma Slacker
  • Talking points: HTML5 content is powered by WebKit on BlackBerry – any improvements to the WebKit engine automatically benefit Web apps.Though the power of the WebWorks platform this content has access to BlackBerry Developer APIs: HTML5 content powered by native capabilities.
  • Demo: build sample app using Ripple & WebWorks BB10
  • Agenda:Intro [10 min] – “Extend HTML5 with WebWorks”Device Capabilities [15 mins] – “Connect HTML5 with native device capabilities”BlackBerry 10 [10 mins]Q & A [10 mins]Suggestion: If there is time at this point, show demos of real apps on a live devicePesktop (PlayBook) or Lensboost (Smartphone) are good examples
  • Talking points: Storage enables offline access to Web content. Storage enables faster performing web apps (cached content doesn’t need to be re-downloaded).WebDB spec is no longer being worked on (IndexDB is coming but not supported on most platforms).
  • Talking points: Storage enables offline access to Web content. Storage enables faster performing web apps (cached content doesn’t need to be re-downloaded).WebDB spec is no longer being worked on (IndexDB is coming but not supported on most platforms).
  • Talking points: The WebKit engine provides default touch event behaviors. Developers can override these behaviors and create their own (e.g. custom swipe gestures, disable pinch-zoom or page scrolling) Very important for BlackBerry 10 Dev Alpha = touch only device.
  • Talking points: Use physical device movement as a form of user input = great for games.devicemotion event fires in very quick intervals (milliseconds apart) when the device is moving. Aura is a WebWorks sample created by TAT that demonstrates using the accelerometer.
  • Talking points: Location aware content = contextual experience. Show users content relevant to their location. Can provide (optional) options. Low accuracy = FAST response (cell-site geolocation) ; High accuracy = slower response (satellite) PlayBook supports autonomous GPS (Satellite) and WiFigeolocation (but only if the hotspot is registered with RIM’s geolocation service).
  • Talking points: Send proactive notifications from your app to the system task bar. Alert users when event(s) happen in your app (e.g. new message, user online, alarm). Great example of HTML5 offering a way to integrate web content with native capabilities.
  • Talking points: Input types can improve the user experience of your Web apps (e.g. make it easier to enter an email address, or URL) Increases quality of data input received from user (e.g. only want numeric data? Provide user with a numeric keyboard). Types of input fields: text, numeric, URL, email, data, time.
  • Talking points: Sockets allow you to maintain a persistent connection – means a server can send real-time messages to an application. Apps can communicate to each other through a server (that acts as a dispatch). 3rd party frameworks make this easy.
  • Talking points: RIM is the first mobile platform to offer WebGL as an application framework to developers. RIM is contributing bug fixes and feature enhancements to community frameworks (e.g. Three.js) Tunnel tilt was created to announce WebGL support on PlayBook.
  • Agenda:Intro [10 min] – “Extend HTML5 with WebWorks”Device Capabilities [15 mins] – “Connect HTML5 with native device capabilities”BlackBerry 10 [10 mins]Q & A [10 mins]
  • Talking points: WebWorks SDK has been re-written for BlackBerry 10 – it now uses native C/C++ as its underlying platform. The packager itself is also brand new. Everything is running as JavaScript and node.js is used to generate your compiled BB10 application. The JavaScript signatures / interface of the WebWorks APIs for BB10 are also being modified to align with similar PhoneGap/Cordova APIs. Why? Make it easier for developers to port content between the two platforms.
  • Talking points: Ripple was recently released again as a Chrome extension. It was originally a Chrome extension, then became a standalone tool and is now back to being an extension. This structure allows the Chrome web engine to evolve on its own, and RIM to easily make over-the-air (OTA) improvements to Ripple for all developers (less upgrades needed!). Ripple extension for chrome supports building apps using the WebWorks SDK.
  • Talking points: Use the Ripple mobile emulator for previewing how your Web content will look on a real device. Can switch between different device profiles (e.g. Test your Web app on a BB10 Dev Alpha, or PlayBook or even iPad profile). Can switch between different platforms to emulate APIs (e.g. test WebWorks APIs, or PhoneGap/Cordova APIs).
  • Talking points: BlackBerry is the only platform to offer remote web inspector to developers. Web Inspector is the industry leading debugging solution for HTML5 content. RIM is contributing features into Web Inspector to make it better.
  • Talking points: 4 APIs were created for initial launch at BB10Jam Orlando. Represent features from most popular app use-cases. JavaScript interface calling native C code.
  • Talking points: New format for calling WebWorks APIs. All apps must include the new webworks.js file and then wait for the webworksready event before calling a WebWorks API. Existing WebWorks applications will need some work to adjust to this new format.
  • Talking points: New format for calling WebWorks APIs. All apps must include the new webworks.js file and then wait for the webworksready event before calling a WebWorks API. Existing WebWorks applications will need some work to adjust to this new format.
  • Talking points: This is a code example of using the new BB10 blackberry.event API. Notice we are working with events and are using the addEventListener() method. This new interface format is very similar to PhoneGap (Cordova).
  • Talking points: The architecture for custom extensions on the BlackBerry 10 platform is still being finalized. A few APIs have already been produced by RIM, but their internal architecture will change. Instead of J2ME or ActionScript, the underlying code used to implement extensions on BB10 will be Native (C/C++).
  • Talking points: This is the tentative schedule for BlackBerry 10 WebWorks APIs over summer 2012.This slide will need to be updated throughout the road show as this roadmap evolves.
  • Agenda:Intro [10 min] – “Extend HTML5 with WebWorks”Device Capabilities [15 mins] – “Connect HTML5 with native device capabilities”BlackBerry 10 [10 mins]Q & A [10 mins]

HTML5 WebWorks HTML5 WebWorks Presentation Transcript

  • Building HTML5 apps with nativecapabilitiesJorge del Casar – @jorgecasarFebruary 29, 2013
  • HTML5 is good for developers
  • Community momentum
  • What can you do with HTML5? Geolocation Web Sockets Offline storage Audio / Video ScoreMobile Tablet Notifications WebGL … and more Slacker
  • HTML5Test.comhttp://html5test.com/compare/browser/bb07/rimtabletos20/bb10.html 5
  • BlackBerry WebWorks “A cross-platform HTML5 application framework for creating standalone BlackBerry applications “
  • Real Examples in App World The Economist News360 HockeyCentral Huffington Post Pesktop Canada’s Got Talent
  • HTML5 powered by WebWorksHTML5, CSS3, JavaScript WebKit engine WebWorks platform BlackBerry Developer APIs https://developer.blackberry.com/html5/api
  • How to get there? Web Assets WebWorks Tools BlackBerry Applications
  • Connect HTML5 with native devicecapabilitiesSoftware & hardware & data … oh my! 10
  • Storage HTML5 localStorage  Name-value pairs localStorage.clear(); localStorage.setItem("Greeting", "Hello World"); key = localStorage.key(0); // "Greeting" item = localStorage.getItem(key); // "Hello World" HTML5 Web DB  Structured relational database var size = 2 * 1024 * 1024; db = window.openDatabase("WebDB", "1.0", "Example", size, onInit);
  • HTML5 File System Read/Write native file-system Able to un-sandbox when wrapped in WebWorks function gotFile(fileEntry) { fileEntry.createWriter(gotWriter, errorHandler); } function gotFs(fs) { fs.root.getFile(blackberry.io.sharedFolder + "/downloads/blackberry.jpg", {create: true}, gotFile, errorHandler); } ... blackberry.io.sandbox = false; window.webkitRequestFileSystem(PERSISTENT, 10 * 1024, gotFs, errorHandler); }
  • Touch Define custom touch event handlers  Up to 4-finger touch events supported  See “Sample Code – SketchPad Application” http://bit.ly/hz67JXdocument.ontouchstart = function(event) { //Tell browser engine not to scroll/span/zoom // when user touches screen: event.preventDefault(); var touch = event.changedTouches[0]; alert(touch.pageX + "," + touch.pageY); Pong-port sample} http://spaceport.io
  • Accelerometer, Magnetometer HTML5 Device motion, Orientation  Respond to physical user inputwindow.addEventListener("devicemotion", function(event) { var x = event.accelerationIncludingGravity.x; var y = event.accelerationIncludingGravity.y; var z = event.accelerationIncludingGravity.z; // Facing up from the Earth’s surface is: // { x : 0, y : 0, z : 9.81 }}, true); Aura sample app
  • GPS HTML5 Geolocation  Retrieve users’ GPS coordinates  Provide location-aware contentfunction onSuccess(position) { console.log("lat = " + pos.coords.latitude); console.log("lon = " + pos.coords.longitude);}var ops = { enableHighAccuracy : true };navigator.geolocation.getCurrentPosition( onSuccess, onError, ops);
  • Web Notification HTML5 API for generating system messages  Proactively notify users about application events var icon = "http://testuri.com/icon.png"; var title = "Web Notification"; var msg = "Sent from the Kitchen Sink app."; var notification = webkitNotifications.createNotification(icon, title, msg); notification.show();  Separate Notification() with app-like experience, BlackBerry Hub
  • HTML5: Media Capture Capture Picture/Video Leverages System Camera app <input type="file" accept="image/*" capture="camera">
  • HTML5 API: Sockets Real-time communication using persistent connections  Frameworks: Socket.io, Pusher.js  E.g. Twitter  Requires server componentvar url = "ws://my.url.com:8001";var socket = new WebSocket(url);socket.onmessage = function(e) { displayMessage(e.data);} wordsquared.com
  • HTML5 API: WebGL 3D graphics powered by OpenGL ES  Frameworks: three.js, CopperLicht, SceneJS, GLGE  GPU provides hardware acceleration Tunnel Tilt game  Free download in App World  Source code in Github https://github.com/blackberry/WebGL-Samples
  • BlackBerry 10WebWorks reborn 20
  • WebWorks APIs JavaScript wrappers for OS developer APIs  http://developer.blackberry.com/html5/api  Identity, Invoke, System… Learning resources  http://github.com/blackberry/WebWorks-Samples  See “kitchen sink” sample application for demos
  • BlackBerry 10 WebWorks SDK JavaScript framework, backed by Native C/C++  No longer Java J2ME or Adobe AIR JavaScript packager  Running in Node.js API evolution  W3C/Cordova alignment  Build plan for future move
  • BlackBerry 10 and Ripple Chrome extension Multi-platform support  BlackBerry 10, Tablet OS and BlackBerry OS Build and sign BlackBerry apps
  • Ripple mobile emulator Development tool for web developers  Preview, test and build BlackBerry web applications  Emulate device-specific APIs and capabilities
  • Remote Web Inspector What is it?  Debug web content running on a remote device.  Profile to optimize web page performance.  Works with simulators or live devices
  • BlackBerry 10 WebWorks APIs blackberry.app blackberry.event blackberry.system blackberry.identity JavaScript C/C++
  • BlackBerry 10 WebWorks<script type="text/javascript" src="webworks.js"></script>function onLoad() { document.addEventListener("webworksready", start);}
  • Config.xml<?xml version="1.0" encoding="UTF-8"?><widget xmlns="http://www.w3.org/ns/widgets" xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0.100" id="webworkspim" xml:lang="en"> <name>PIM Contacts</name> <author>Research In Motion</author> <content src="index.html"/> <icon src="appicon.png" /> <feature id="blackberry.pim.contacts" />
  • Some recent API additions Invoke  Invoke other apps, card  Be invoked PIM  Contacts  Calendar, Messages on their way BBM  Update profile, invite to download
  • Custom ExtensionsBuilding your own WebWorks APIs 30
  • Custom WebWorks APIs Build your own APIs  Access native layer functionality  Go beyond HTML5 and core WebWorks JavaScript interface for platform code  BlackBerry OS = Java Lensboost  Tablet OS = AIR Mblware Ltd  BlackBerry 10 = C/C++
  • Custom WebWorks APIs WebWorks SDK for BlackBerry 10  Platforms = BlackBerry 10  Native language = C/C++ javascript native client.js index.js manifest.json jnext.cpp jnext.hpp
  • Custom WebWorks APIs Open Source  http://github.com/blackberry/WebWorks-Community-APIs  Get started using TEMPLATE sample in Github
  • ResourcesPlaces to go, people to see, what’s comingnext 34
  • WebWorks Roadmap Frequent releases Incremental APIs, emulation http://developer.blackberry.com/downloads/roadmap
  • For more information http://developer.blackberry.com/html5
  • THANK YOUJorge del Casar - @jorgecasarFebruary 29, 2013