A look at HTML/JavaScript leading up to mobile development

1. Mobile Development
Wednesday, September 25, 13

2. Brief introduction
to HTML5
Wednesday, September 25, 13

3. So what is HTML5?
It’s what comes after HTML4 right?
Actually it’s a 600 page specification
describing refinements and new additions to
HTML
Designed to address the needs of modern
web applications
Wednesday, September 25, 13

4. What’s cool about it?
Do cool shit in the browser without plugins
Create richer web experiences
Create web content which can be parsed by
machines. Welcome to the semantic web!
Add data attributes to HTML elements
Drag and drop (See: http://html5demos.com/
dnd-upload)
Wednesday, September 25, 13

5. What’s cool about it?
Geolocation - use GPS information to power
location aware applications
Canvas - graphics and animation
WebSockets - low level network
programming
LocalStorage - Key / Value store for local
data
Wednesday, September 25, 13

6. What’s cool about it?
WebSQL - store data in a local SQL database
WebGL - OpenGL 3D graphics for the web!
WebWorkers - Parallel programming in the
browser
SVG - Scalable Vector Graphics
Wednesday, September 25, 13

7. The three amigos:
HTML, JavaScript, CSS
Wednesday, September 25, 13

8. HTML5 features we'll
encounter in this
presentation
Data attributes
Canvas
LocalStorage
Geolocation
Wednesday, September 25, 13

9. What’s it good for?
Building modern web applications: Facebook,
Google Plus, YouTube, Cloud9 IDE (which we’ll
look at shortly)
Building mobile-friendly apps
Building games
Wednesday, September 25, 13

10. Featured HTML5 Games
Cut the rope: http://www.cuttherope.net
Cube Slam: https://www.cubeslam.com
HexGL: http://hexgl.bkcore.com
BananaBread: http://goo.gl/L7Vzv
Wednesday, September 25, 13

11. HTML5 Games recap
HTML5 and related tech empowers
compelling game experiences
HTML5 games on mobile will become
increasingly more common as HTML5 support
evolves in leading mobile web browsers.
Wednesday, September 25, 13

12. Coding with
HTML5
Wednesday, September 25, 13

13. Low cost of entry
Low cost to get started. Text editor and
browser might be all you need
Cooler ways exists to build and share small
HTML5 code snippets.
Wednesday, September 25, 13

14. HTML5 doc structure
Wednesday, September 25, 13

15. Wednesday, September 25, 13

16. Hello Web World
Wednesday, September 25, 13

17. Introducing jsfiddle.net
Wednesday, September 25, 13

18. jsfiddle.net: Hello World
Hello world: http://jsfiddle.net/cjus/2SKTv/
Wednesday, September 25, 13

19. jsfiddle.net: jQ Plugin
Segmentify plugin: http://jsfiddle.net/cjus/pNrgZ/
Wednesday, September 25, 13

20. Introducing Cloud9 IDE
Wednesday, September 25, 13

21. Introducing Cloud9 IDE
Wednesday, September 25, 13

22. Introducing Cloud9 IDE
Wednesday, September 25, 13

23. Great IDEs
Wednesday, September 25, 13

24. WebStorm IDE
Wednesday, September 25, 13

25. IDE takeaways
Lots of ways to develop web applications:
Locally and in the cloud
The tool you use should depend on your
needs.
Industrial strength IDEs are readily availble
Wednesday, September 25, 13

26. Deeper dive:
building HTML5
Wednesday, September 25, 13

27. Code walk-through:
html5-Canvas
https://c9.io/cjus/html5-canvas-1
Wednesday, September 25, 13

28. Code walk-through:
html5-animation
https://c9.io/cjus/html5-canvas-2
Wednesday, September 25, 13

29. Code walk-through:
html5-animation
https://c9.io/dougdodd/platypusgame
Wednesday, September 25, 13

30. Code walk-through:
html5-geolocation
https://c9.io/cjus/html5-geolocation
Wednesday, September 25, 13

31. Building Mobile
Apps
Wednesday, September 25, 13

32. The role of JavaScript
Many HTML5 features require code to bring
them to life
The HTML5 canvas demo we saw earlier is
one such example
However, programming those interactions
doesn’t have to be in JavaScript directly
Wednesday, September 25, 13

33. Using other languages
Today, transcoders exists to allow
programmers to code in other languages
Here are just a few: Google Dart,
CoffeeScript, Python, and custom
transcoders...
JavaScript is has been called the new
assembly language
Wednesday, September 25, 13

34. Mozilla
Built using a tool that compiles C++ and
OpenGL into JavaScript and WebGL.
Created in part to prove that games of this
nature can run in JavaScript and WebGL.
Wednesday, September 25, 13

35. jQuery
Programming the DOM sucks
jQuery makes it easier to code against the
DOM
Wednesday, September 25, 13

36. A jQuery Example
http://jsfiddle.net/cjus/Zn9aJ/
Wednesday, September 25, 13

37. jQuery and friends
Over the years jQuery became immensely
popular spawning other frameworks:
jQueryUI
jQueryMobile
Wednesday, September 25, 13

38. jQueryMobile (JQM)
User Interface Framework for popular mobile
devices
Built on jQuery and jQueryUI foundation
Wednesday, September 25, 13

39. How it works
Wednesday, September 25, 13

40. Hands on JQM Tutorial
https://c9.io/cjus/jquerymobilepresentation
Wednesday, September 25, 13

41. Code walk-through:
JQM Business Card App
https://c9.io/cjus/jquerymobile-business-card
Wednesday, September 25, 13

42. Creating app mockups
using JQM
jQueryMobile can be used to create
application mockups without writing a single
line of code!
Wednesday, September 25, 13

43. codiqa: UI mobile builder
https://codiqa.com
Wednesday, September 25, 13

44. Introducing PhoneGap
Wednesday, September 25, 13

45. Wednesday, September 25, 13

46. Wednesday, September 25, 13

47. Phoast
Phoast is my personal project which
combines my interest in web development
with my interest in Photography
I’m using the Phoast backend with a new
mobile application I’ve created PhoastXplora
Wednesday, September 25, 13

48. PhoastXplorer FrontEnd
HTML5 Mobile app written using
jQueryMobile
Communicates with Phoast backend using
RESTful APIs
Packaged as a PhoneGap app for deployment
to mobile devices
Wednesday, September 25, 13

49. PhoastXplora
Wednesday, September 25, 13

50. Phoast Backend
An API server written in JavaScript and
running on NodeJS
Server backend uses MongoDB and Redis
Communicates with Google, Weather.com,
Yahoo API servers.
Wednesday, September 25, 13

51. Code walk-though:
PhoastXplora
Wednesday, September 25, 13

52. Quick recap
In this presentation we’ve looked at HTML5
and related features.
We’ve built simple mobile applications using
HTML5 and jQuery and jQueryMobile
We’ve used PhoneGap to build and deploy an
HTML5 based mobile app to physical
hardware.
Wednesday, September 25, 13

53. What’s next?
Wednesday, September 25, 13

54. Next steps:
Learn more at key sites
HTML5Rocks:
http://www.html5rocks.com
jQueryMobile site:
http://www.jquerymobile.com
TIP: visit it on your mobile device!
PhoneGap site:
http://www.phonegap.com
Wednesday, September 25, 13

55. Next steps:
Read one of many great
books
Wednesday, September 25, 13

56. Next steps:
Watch Lynda.com vids
jQuery Mobile Web Applications (3hrs 13mins)
jQuery Mobile Essential Training (3hrs 11mins)
Up and Running with PhoneGap (1hrs 57mins)
HTML5 for Flash Developers (3hrs 16mins)
and many more HTML5 videos!
Wednesday, September 25, 13

57. Reflecting on
HTML5
HTML5 is approachable tech
Easy to explore
Useful for mobile dev
Here to stay
Cause for reflection
Wednesday, September 25, 13