Blackberry <3 HTML5

The BlackBerry Web Application Platform

@BlackBerryDev @BBMYCoders Why are we here?  Personal growth 
Enhance your knowledge  Community  The Web is a great place to be  Discover opportunities  Montization

@BlackBerryDev @BBMYCoders BlackBerry Web Platform  Driven by strong Web
standards support  Powered by WebKit  Industry leading HTML5 and CSS 3 browser http://entanglement.gopherwoodstudios.com/light http://acid3.acidtests.org http://html5test.com

@BlackBerryDev @BBMYCoders BlackBerry Web Platform  Commitment to World class
performance  JIT compiler  Hardware acceleration  AliceJS  http://blackberry.github.com/Alice/ JS

@BlackBerryDev @BBMYCoders BlackBerry Web Platform  375,000 registered developers 
Strong partnerships with industry leaders  Vibrant developer community

Community Forums • Super User Forum Escalation • Spanish Forums
Resource Center • Unified learning resources library • Tutorials, Labs, Videos, Sample Code • http://developer.blackberry.com Social Media • Twitter @BlackBerryDev • Facebook • BBM Social Platform • http://devblog.blackberry.com Regional Developer Groups • 40 developer groups World wide • Join BlackBerry Malaysian Coders • Twitter @BBmyCoders • Facebook BBMalaysianCoders BlackBerry Community

@BlackBerryDev @BBMYCoders BlackBerry Landscape  70 million subscribers  625+
carriers and distribution partners  175 countries

@BlackBerryDev @BBMYCoders BlackBerry App World  By the numbers: 
50 million active users  5.5 million daily downloads  60,000 applications  Monetization  Paid or Free apps  Integrated payment service  Subscriptions  Micropayments

@BlackBerryDev @BBMYCoders BlackBerry App World  Excellent opportunity for developers
 Free to use  Credit card, PayPal and carrier billing  26 supported currencies  70/30 revenue split

@BlackBerryDev @BBMYCoders BlackBerry WebWorks “A cross-platform HTML5 application framework for
creating standalone BlackBerry applications using modern and standardized web technologies“

@BlackBerryDev @BBMYCoders WebWorks architecture WebKit Engine WebWorks Platform Security PIM
Storage Push Media Hardware BBM Monetization Compression Background Multi-Tasking BlackBerry Platform … Your HTML5 content http://mycityway.com

@BlackBerryDev @BBMYCoders WebWorks API sample <script type="text/JavaScript"> function openVideoCamera() {
var args = new blackberry.invoke.CameraArguments(); args.view = blackberry.invoke.CameraArguments.VIEW_RECORDER; blackberry.invoke.invoke(blackberry.invoke.APP_CAMERA, args); } </script>

@BlackBerryDev @BBMYCoders Real life examples Guitar Chords (My App Catalog)
Hollywood Bowl (LA Philharmonic) Loca FM (Vanatur World Mobile) Scoremobile (Score Media) tiff (Toronto Film Festival)

@BlackBerryDev @BBMYCoders WebWorks is Open Source  http://blackberry.github.com  WebWorks
framework  Documentation  Sample code  Community APIs  Tools  WebKit

 Open your favorite text editor or IDE  Create
index.html and config.xml index.html <html> <body> <p> Hello World </p> </body> </html> Start writing code 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.0"> <name>helloWorld</name> <content src="index.html"/> </widget>

@BlackBerryDev @BBMYCoders BlackBerry Ripple mobile emulator  Development tool for
web developers  Preview and test mobile content from an emulated BlackBerry Smartphone or PlayBook environment

@BlackBerryDev @BBMYCoders BlackBerry Ripple mobile emulator  Multiple platforms supported
 WebWorks, WebWorks Tablet OS, PhoneGap, Mobile Web  Change active device  PlayBook, 9 different BlackBerry Smartphones  Device emulation support  Accelerometer, Geolocation, Push, Messaging, Events, Device & Network settings  Web inspector  Debugging and profiling

@BlackBerryDev @BBMYCoders Web Inspector mobile testing  Live device profiling
and debugging  BlackBerry 7 and BlackBerry PlayBook

@BlackBerryDev @BBMYCoders BlackBerry WebWorks Packager  Transforms web assets into
standalone BlackBerry application  Command line tool (bbwp) ~\BlackBerry WebWorks Packager\bbwp>bbwp "helloWorld.zip" [INFO] Parsing command line options [INFO] Parsing bbwp.properties [INFO] Validating WebWorks archive [INFO] Parsing config.xml [WARNING] Failed to find a <feature> element [WARNING] Failed to find the <author> element [INFO] Populating application source [INFO] Compiling WebWorks application [INFO] Packaging the bar file [INFO] Bar packaging complete [INFO] WebWorks application packaging complete

@BlackBerryDev @BBMYCoders Time for a demo!  Ripple  Alice
 WebWorks

@BlackBerryDev @BBMYCoders Advertising service  Embed ads in your app
 Mediation platform aggregates ad networks  Smart ads <div id="adBanner"> </div> <script type="text/javascript"> var adId= 31848; var b = new blackberry.advertising.Banner(adId, "adBanner"); </script>

@BlackBerryDev @BBMYCoders Payment Service  Sell digital goods  Fremium/paid
upgrades  Pay-per-use / Subscriptions  Secure and consistent  Paypal, carrier billing or credit cards  Integrated payment flow paymentObj = { "digitalGoodID" : "12345", "digitalGoodSKU" : "101010101", "digitalGoodName" : "Levels 11-20", "metaData" : "pin=0a12345;device=9900", "purchaseAppName" : "Puzzle Mania" }; blackberry.payment.purchase(paymentObj, onSuccess, onFailure);

@BlackBerryDev @BBMYCoders BBM Social Platform  45 million users 
2 million new users per month  100 billion messages sent per month  70% use it daily  Tightly connected communities // Users can invite *their* friends to download *your* app var bbm = blackberry.bbm.platform; var result = bbm.io.inviteToDownload(onComplete);

@BlackBerryDev @BBMYCoders Tip #1: Feature Detection  Never make assumptions
about browser behavior  User Agent does not guarantee standards support  Use feature detection instead of browser detection  E.g. Modernizr, has.js

@BlackBerryDev @BBMYCoders Tip #1: Feature Detection  Browser detection (User
agent):  Feature detection: if (window.localStorage !== undefined) { // Use local storage when it is supported window.localStorage.setItem("foo", "bar"); } else { document.cookie = "foo=bar"; //default behavior } if (navigator.userAgent.indexOf("WebKit") > 0) { //assumes that all WebKit browsers support local storage window.localStorage.setItem("foo", "bar"); } else { document.cookie = "foo=bar"; //default behavior }

@BlackBerryDev @BBMYCoders Tip #2: Viewport <meta name=“viewport” content=“width=200”/> <meta name=“viewport”
content=“initial-scale=1.0”/> http://jquerymobile.com/demos/1.0rc1/  Target scale level for screen dimension  Instruct browser how page content should be scaled

@BlackBerryDev @BBMYCoders Tip #2: Viewport  Recommendations:  Support different
screen sizes  Consider portrait vs. landscape  Don’t use both height & width viewport properties  Other helpful viewport properties  width=device-width  user-scalable=no  target-densitydpi=device-dpi <meta name="viewport" content="initial-scale=1.0">

@BlackBerryDev @BBMYCoders Bonus Tip: Use Event Handlers  Event handlers
are your friends  Which is better (A or B)? <button onclick="doSomething()">Submit</button> ... function doClick(e) { console.log(" Click event: " + e); } //A element.onclick = doClick; //B element.addEventListener("click", doClick, false);

@BlackBerryDev @BBMYCoders  Choose HTML5  Use Ripple and the
BlackBerry WebWorks SDK  Monetize your app through BlackBerry App World Putting it all together BlackBerry WebWorks Packager Your web assets BlackBerry app

@BlackBerryDev @BBMYCoders Takeaways  HTML5  CSS3  Webkit 
Open Source  Frameworks  Community  App World  Monetization

Come Jam with us! May 1-3 Orlando, FL USA www.blackberryjamconference.com

@BlackBerryDev @BBMYCoders Thank you http://www.blackberrydevcon.com  http://developers.blackberry.com Follow us @BBmyCoders

Blackberry <3 HTML5

Blackberry <3 HTML5

[email protected]

More Decks by [email protected]

Other Decks in Technology

Featured

Transcript

The BlackBerry Web Application Platform

@BlackBerryDev @BBMYCoders Why are we here?  Personal growth 

@BlackBerryDev @BBMYCoders BlackBerry Web Platform  Driven by strong Web

@BlackBerryDev @BBMYCoders BlackBerry Web Platform  Commitment to World class

@BlackBerryDev @BBMYCoders BlackBerry Web Platform  375,000 registered developers 

Community Forums • Super User Forum Escalation • Spanish Forums

@BlackBerryDev @BBMYCoders BlackBerry Landscape  70 million subscribers  625+

@BlackBerryDev @BBMYCoders BlackBerry App World  By the numbers: 

@BlackBerryDev @BBMYCoders BlackBerry App World  Excellent opportunity for developers

@BlackBerryDev @BBMYCoders BlackBerry WebWorks “A cross-platform HTML5 application framework for

@BlackBerryDev @BBMYCoders WebWorks architecture WebKit Engine WebWorks Platform Security PIM

@BlackBerryDev @BBMYCoders WebWorks API sample <script type="text/JavaScript"> function openVideoCamera() {

@BlackBerryDev @BBMYCoders Real life examples Guitar Chords (My App Catalog)

@BlackBerryDev @BBMYCoders WebWorks is Open Source  http://blackberry.github.com  WebWorks

 Open your favorite text editor or IDE  Create

@BlackBerryDev @BBMYCoders BlackBerry Ripple mobile emulator  Development tool for

@BlackBerryDev @BBMYCoders BlackBerry Ripple mobile emulator  Multiple platforms supported

@BlackBerryDev @BBMYCoders Web Inspector mobile testing  Live device profiling

@BlackBerryDev @BBMYCoders BlackBerry WebWorks Packager  Transforms web assets into

@BlackBerryDev @BBMYCoders Time for a demo!  Ripple  Alice

@BlackBerryDev @BBMYCoders Advertising service  Embed ads in your app

@BlackBerryDev @BBMYCoders Payment Service  Sell digital goods  Fremium/paid

@BlackBerryDev @BBMYCoders BBM Social Platform  45 million users 

@BlackBerryDev @BBMYCoders Tip #1: Feature Detection  Never make assumptions

@BlackBerryDev @BBMYCoders Tip #1: Feature Detection  Browser detection (User

@BlackBerryDev @BBMYCoders Tip #2: Viewport <meta name=“viewport” content=“width=200”/> <meta name=“viewport”

@BlackBerryDev @BBMYCoders Tip #2: Viewport  Recommendations:  Support different

@BlackBerryDev @BBMYCoders Bonus Tip: Use Event Handlers  Event handlers

@BlackBerryDev @BBMYCoders  Choose HTML5  Use Ripple and the

@BlackBerryDev @BBMYCoders Takeaways  HTML5  CSS3  Webkit 

Come Jam with us! May 1-3 Orlando, FL USA www.blackberryjamconference.com

@BlackBerryDev @BBMYCoders Thank you http://www.blackberrydevcon.com  http://developers.blackberry.com Follow us @BBmyCoders