building native apps with html, css, and javascript · building native apps with html, css, and...

23
Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark 1 Wednesday, May 4, 2011

Upload: others

Post on 03-Jun-2020

30 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Building Native Apps with HTML, CSS, and JavaScript

Jonathan Stark

1Wednesday, May 4, 2011

Page 2: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Staggering Growth

2Wednesday, May 4, 2011

Page 3: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Everything is Up

• Average daily useage

• Mobile media usage

• Smartphone ownership

• 3G/4G subscribers

• % of smartphones vs dumfones

3Wednesday, May 4, 2011

Page 4: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

5 Billion Subscriptionsup from 4.6B in 2009 and 726M in 2000

4Wednesday, May 4, 2011

Page 5: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Fragmentation

5Wednesday, May 4, 2011

Page 6: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Platform Fragmention

• iOS

• Android (Froyo, Gingerbread, Honeycomb)

• BlackBerry

• Windows Phone 7

• webOS

• (Symbian, MeeGo, bada, etc...)

6Wednesday, May 4, 2011

Page 7: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Device Fragmentation

• 68 Android handsets in the US alone

• 100+ tablets announced at CES

• Screen sizes range from postage stamp to big screen TV

• Screen resolution has become an issue

7Wednesday, May 4, 2011

Page 8: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Et tu, Apple?• iPhone 2G

• iPhone 3G

• iPhone 3GS

• iPhone 4

• iPod Touch 1st gen

• iPod Touch 2nd gen

• iPod Touch 3rd gen

• iPod Touch 4th gen

• iPad 1

• iPad 2

8Wednesday, May 4, 2011

Page 9: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Et tu, Apple?• Camera or not?

• Multitasking or not?

• 3G or not?

• GPS or not?

• Gyro or not?

• Screen size

• Pixel desnsity

• Storage capacity

• Memory limit

• Processor speed

9Wednesday, May 4, 2011

Page 10: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Hybrid Apps

10Wednesday, May 4, 2011

Page 11: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

CSS3 Transforms, Transitions, & Animations

11Wednesday, May 4, 2011

Page 12: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

demo

12Wednesday, May 4, 2011

Page 13: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

jQTouch

13Wednesday, May 4, 2011

Page 14: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

jQTouch

• Open source

• Created by @DavidKaneda

• jQuery plugin

• For small webkit devices

14Wednesday, May 4, 2011

Page 15: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

demo

15Wednesday, May 4, 2011

Page 16: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

PhoneGap

16Wednesday, May 4, 2011

Page 17: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

PhoneGap

• Open source

• Created by @Nitobi

• Native app wrapper

• Multiple platforms

17Wednesday, May 4, 2011

Page 18: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

http://www.phonegap.com/features

18Wednesday, May 4, 2011

Page 19: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

WEINRE

19Wednesday, May 4, 2011

Page 20: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

WEINRE

• Open source

• Created by @pmuellr

• Remote debugger

• WEb INspecto REmote

• You owe Pat a beer

20Wednesday, May 4, 2011

Page 21: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

demo

21Wednesday, May 4, 2011

Page 22: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Conclusion

"If you can build your app with HTML, CSS, and JavaScript, then you probably should."

- Jonathan Stark

22Wednesday, May 4, 2011

Page 23: Building Native Apps with HTML, CSS, and JavaScript · Building Native Apps with HTML, CSS, and JavaScript Jonathan Stark ... • Smartphone ownership • 3G/4G subscribers • %

Questions?

• jonathanstark.com/books

• jonathanstark.com/contact

• jonathanstark.com/ete

23Wednesday, May 4, 2011