HTML5 for mobile development
0 likes1,893 views
The document discusses HTML5, its features, and how to use it for mobile development. Some key points covered include: - HTML5 allows creating richer web experiences without plugins and adds features like canvas, geolocation, and web storage. - Tools like jQueryMobile can be used to build mobile apps with HTML5 that are packaged into native apps using PhoneGap. - Examples shown include building a basic canvas animation, geolocation app, and a photo app called PhoastXplora using these HTML5 features.
HTML5 for mobile development
- 1. Mobile Development Wednesday, September 25, 13
- 2. Brief introduction to HTML5 Wednesday, September 25, 13
- 3. So what is HTML5? Its what comes after HTML4 right? Actually its a 600 page speci鍖cation describing re鍖nements and new additions to HTML Designed to address the needs of modern web applications Wednesday, September 25, 13
- 4. Whats 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. Whats 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. Whats 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. Whats it good for? Building modern web applications: Facebook, Google Plus, YouTube, Cloud9 IDE (which well 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 js鍖ddle.net Wednesday, September 25, 13
- 18. js鍖ddle.net: Hello World Hello world: http://js鍖ddle.net/cjus/2SKTv/ Wednesday, September 25, 13
- 19. js鍖ddle.net: jQ Plugin Segmentify plugin: http://js鍖ddle.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
- 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 doesnt 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://js鍖ddle.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 Im using the Phoast backend with a new mobile application Ive 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
- 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
- 52. Quick recap In this presentation weve looked at HTML5 and related features. Weve built simple mobile applications using HTML5 and jQuery and jQueryMobile Weve used PhoneGap to build and deploy an HTML5 based mobile app to physical hardware. Wednesday, September 25, 13
- 53. Whats 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. Re鍖ecting on HTML5 HTML5 is approachable tech Easy to explore Useful for mobile dev Here to stay Cause for re鍖ection Wednesday, September 25, 13