DEV141 Gord Tanner (@ gordtanner ) Michael Brooks (@ mwbrooks ) May 1, 2012

1

DEV141Gord Tanner (@gordtanner) Michael Brooks (@mwbrooks)May 1, 2012

Porting to BlackBerry using Apache Cordova

What is …

2

What is …

3

You may know it as …

4

Wikipedia Port Demo

5

iOS

6

Android

7

BlackBerry

8

Be Agnostic …

9

It will look right at first, butWhen people look deeperThe will only see what is wrong

Looks Weird on BlackBerry …

10

We’ve Solved this Already …

11

HTML 5 Makes it Easier …

12

Platform UI Guidelines …

13

OS7

14

Menus

15

Menus

16

PlayBook

17

18

bbUI.js

19

https://github.com/blackberry/bbUI.js

Responsive Web Design …

20

http://www.anderssonwise.com/

Quick Preview …

21

http://responsive.is/

CSS Media Queries - No Magic …

22

#button { width: 25%; }

@media screen and (max-width: 480px) { #button { width: 100%; }}

Many Samples …

23

http://mediaqueri.es/

Cross-Platform Gotchas …

24

• Interaction• Mouse Events• Touch Events (thumbs.js)

• CSS Performance

• JavaScript Performance

THANK YOU

DEV141Gord Tanner (@gordtanner) Michael Brooks (@mwbrooks)May 1, 2012