Mobile Development
Wednesday, September 25, 13
Brief introduction
to HTML5
Wednesday, September 25, 13
So what is HTML5?
It’s what comes after HTML4 right?
Actually it’s a 600 page specification
describing refinements and new a...
What’s cool about it?
Do cool shit in the browser without plugins
Create richer web experiences
Create web content which c...
What’s cool about it?
Geolocation - use GPS information to power
location aware applications
Canvas - graphics and animati...
What’s cool about it?
WebSQL - store data in a local SQL database
WebGL - OpenGL 3D graphics for the web!
WebWorkers - Par...
The three amigos:
HTML, JavaScript, CSS
Wednesday, September 25, 13
HTML5 features we'll
encounter in this
presentation
Data attributes
Canvas
LocalStorage
Geolocation
Wednesday, September 2...
What’s it good for?
Building modern web applications: Facebook,
Google Plus, YouTube, Cloud9 IDE (which we’ll
look at shor...
Featured HTML5 Games
Cut the rope: http://www.cuttherope.net
Cube Slam: https://www.cubeslam.com
HexGL: http://hexgl.bkcor...
HTML5 Games recap
HTML5 and related tech empowers
compelling game experiences
HTML5 games on mobile will become
increasing...
Coding with
HTML5
Wednesday, September 25, 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 s...
HTML5 doc structure
Wednesday, September 25, 13
Wednesday, September 25, 13
Hello Web World
Wednesday, September 25, 13
Introducing jsfiddle.net
Wednesday, September 25, 13
jsfiddle.net: Hello World
Hello world: http://jsfiddle.net/cjus/2SKTv/
Wednesday, September 25, 13
jsfiddle.net: jQ Plugin
Segmentify plugin: http://jsfiddle.net/cjus/pNrgZ/
Wednesday, September 25, 13
Introducing Cloud9 IDE
Wednesday, September 25, 13
Introducing Cloud9 IDE
Wednesday, September 25, 13
Introducing Cloud9 IDE
Wednesday, September 25, 13
Great IDEs
Wednesday, September 25, 13
WebStorm IDE
Wednesday, September 25, 13
IDE takeaways
Lots of ways to develop web applications:
Locally and in the cloud
The tool you use should depend on your
ne...
Deeper dive:
building HTML5
Wednesday, September 25, 13
Code walk-through:
html5-Canvas
https://c9.io/cjus/html5-canvas-1
Wednesday, September 25, 13
Code walk-through:
html5-animation
https://c9.io/cjus/html5-canvas-2
Wednesday, September 25, 13
Code walk-through:
html5-animation
https://c9.io/dougdodd/platypusgame
Wednesday, September 25, 13
Code walk-through:
html5-geolocation
https://c9.io/cjus/html5-geolocation
Wednesday, September 25, 13
Building Mobile
Apps
Wednesday, September 25, 13
The role of JavaScript
Many HTML5 features require code to bring
them to life
The HTML5 canvas demo we saw earlier is
one ...
Using other languages
Today, transcoders exists to allow
programmers to code in other languages
Here are just a few: Googl...
Mozilla
Built using a tool that compiles C++ and
OpenGL into JavaScript and WebGL.
Created in part to prove that games of ...
jQuery
Programming the DOM sucks
jQuery makes it easier to code against the
DOM
Wednesday, September 25, 13
A jQuery Example
http://jsfiddle.net/cjus/Zn9aJ/
Wednesday, September 25, 13
jQuery and friends
Over the years jQuery became immensely
popular spawning other frameworks:
jQueryUI
jQueryMobile
Wednesd...
jQueryMobile (JQM)
User Interface Framework for popular mobile
devices
Built on jQuery and jQueryUI foundation
Wednesday, ...
How it works
Wednesday, September 25, 13
Hands on JQM Tutorial
https://c9.io/cjus/jquerymobilepresentation
Wednesday, September 25, 13
Code walk-through:
JQM Business Card App
https://c9.io/cjus/jquerymobile-business-card
Wednesday, September 25, 13
Creating app mockups
using JQM
jQueryMobile can be used to create
application mockups without writing a single
line of cod...
codiqa: UI mobile builder
https://codiqa.com
Wednesday, September 25, 13
Introducing PhoneGap
Wednesday, September 25, 13
Wednesday, September 25, 13
Wednesday, September 25, 13
Phoast
Phoast is my personal project which
combines my interest in web development
with my interest in Photography
I’m usi...
PhoastXplorer FrontEnd
HTML5 Mobile app written using
jQueryMobile
Communicates with Phoast backend using
RESTful APIs
Pac...
PhoastXplora
Wednesday, September 25, 13
Phoast Backend
An API server written in JavaScript and
running on NodeJS
Server backend uses MongoDB and Redis
Communicate...
Code walk-though:
PhoastXplora
Wednesday, September 25, 13
Quick recap
In this presentation we’ve looked at HTML5
and related features.
We’ve built simple mobile applications using
...
What’s next?
Wednesday, September 25, 13
Next steps:
Learn more at key sites
HTML5Rocks:
http://www.html5rocks.com
jQueryMobile site:
http://www.jquerymobile.com
T...
Next steps:
Read one of many great
books
Wednesday, September 25, 13
Next steps:
Watch Lynda.com vids
jQuery Mobile Web Applications (3hrs 13mins)
jQuery Mobile Essential Training (3hrs 11min...
Reflecting on
HTML5
HTML5 is approachable tech
Easy to explore
Useful for mobile dev
Here to stay
Cause for reflection
Wedne...
Upcoming SlideShare
Loading in …5
×

HTML5 for mobile development

1,603 views

Published on

A look at HTML/JavaScript leading up to mobile development

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,603
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 for mobile development

  1. 1. Mobile Development Wednesday, September 25, 13
  2. 2. Brief introduction to HTML5 Wednesday, September 25, 13
  3. 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. 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. 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. 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. 7. The three amigos: HTML, JavaScript, CSS Wednesday, September 25, 13
  8. 8. HTML5 features we'll encounter in this presentation Data attributes Canvas LocalStorage Geolocation Wednesday, September 25, 13
  9. 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. 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. 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. 12. Coding with HTML5 Wednesday, September 25, 13
  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. 14. HTML5 doc structure Wednesday, September 25, 13
  15. 15. Wednesday, September 25, 13
  16. 16. Hello Web World Wednesday, September 25, 13
  17. 17. Introducing jsfiddle.net Wednesday, September 25, 13
  18. 18. jsfiddle.net: Hello World Hello world: http://jsfiddle.net/cjus/2SKTv/ Wednesday, September 25, 13
  19. 19. jsfiddle.net: jQ Plugin Segmentify plugin: http://jsfiddle.net/cjus/pNrgZ/ Wednesday, September 25, 13
  20. 20. Introducing Cloud9 IDE Wednesday, September 25, 13
  21. 21. Introducing Cloud9 IDE Wednesday, September 25, 13
  22. 22. Introducing Cloud9 IDE Wednesday, September 25, 13
  23. 23. Great IDEs Wednesday, September 25, 13
  24. 24. WebStorm IDE Wednesday, September 25, 13
  25. 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. 26. Deeper dive: building HTML5 Wednesday, September 25, 13
  27. 27. Code walk-through: html5-Canvas https://c9.io/cjus/html5-canvas-1 Wednesday, September 25, 13
  28. 28. Code walk-through: html5-animation https://c9.io/cjus/html5-canvas-2 Wednesday, September 25, 13
  29. 29. Code walk-through: html5-animation https://c9.io/dougdodd/platypusgame Wednesday, September 25, 13
  30. 30. Code walk-through: html5-geolocation https://c9.io/cjus/html5-geolocation Wednesday, September 25, 13
  31. 31. Building Mobile Apps Wednesday, September 25, 13
  32. 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. 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. 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. 35. jQuery Programming the DOM sucks jQuery makes it easier to code against the DOM Wednesday, September 25, 13
  36. 36. A jQuery Example http://jsfiddle.net/cjus/Zn9aJ/ Wednesday, September 25, 13
  37. 37. jQuery and friends Over the years jQuery became immensely popular spawning other frameworks: jQueryUI jQueryMobile Wednesday, September 25, 13
  38. 38. jQueryMobile (JQM) User Interface Framework for popular mobile devices Built on jQuery and jQueryUI foundation Wednesday, September 25, 13
  39. 39. How it works Wednesday, September 25, 13
  40. 40. Hands on JQM Tutorial https://c9.io/cjus/jquerymobilepresentation Wednesday, September 25, 13
  41. 41. Code walk-through: JQM Business Card App https://c9.io/cjus/jquerymobile-business-card Wednesday, September 25, 13
  42. 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. 43. codiqa: UI mobile builder https://codiqa.com Wednesday, September 25, 13
  44. 44. Introducing PhoneGap Wednesday, September 25, 13
  45. 45. Wednesday, September 25, 13
  46. 46. Wednesday, September 25, 13
  47. 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. 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. 49. PhoastXplora Wednesday, September 25, 13
  50. 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. 51. Code walk-though: PhoastXplora Wednesday, September 25, 13
  52. 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. 53. What’s next? Wednesday, September 25, 13
  54. 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. 55. Next steps: Read one of many great books Wednesday, September 25, 13
  56. 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. 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

×