html5 for mobile development
DESCRIPTION
A look at HTML/JavaScript leading up to mobile developmentTRANSCRIPT
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 additions to HTML
Designed to address the needs of modern web applications
Wednesday, September 25, 13
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
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
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
The three amigos:HTML, JavaScript, CSS
Wednesday, September 25, 13
HTML5 features we'll encounter in this
presentationData attributes
Canvas
LocalStorage
Geolocation
Wednesday, September 25, 13
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
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
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
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 share small HTML5 code snippets.
Wednesday, September 25, 13
HTML5 doc structure
Wednesday, September 25, 13
Wednesday, September 25, 13
Hello Web World
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 takeawaysLots 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
Deeper dive: building HTML5
Wednesday, September 25, 13
Code walk-through:html5-Canvas
https://c9.io/cjus/html5-canvas-1Wednesday, September 25, 13
Code walk-through:html5-animation
https://c9.io/cjus/html5-canvas-2Wednesday, September 25, 13
Code walk-through:html5-animation
https://c9.io/dougdodd/platypusgameWednesday, September 25, 13
Code walk-through:html5-geolocation
https://c9.io/cjus/html5-geolocationWednesday, September 25, 13
Building Mobile Apps
Wednesday, September 25, 13
The role of JavaScriptMany 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
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
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
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
Wednesday, September 25, 13
jQueryMobile (JQM)
User Interface Framework for popular mobile devices
Built on jQuery and jQueryUI foundation
Wednesday, September 25, 13
How it works
Wednesday, September 25, 13
Hands on JQM Tutorial
https://c9.io/cjus/jquerymobilepresentationWednesday, September 25, 13
Code walk-through:JQM Business Card App
https://c9.io/cjus/jquerymobile-business-cardWednesday, September 25, 13
Creating app mockups using JQM
jQueryMobile can be used to create application mockups without writing a single line of code!
Wednesday, September 25, 13
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 using the Phoast backend with a new mobile application I’ve created PhoastXplora
Wednesday, September 25, 13
PhoastXplorer FrontEndHTML5 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
PhoastXplora
Wednesday, September 25, 13
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
Code walk-though:PhoastXplora
Wednesday, September 25, 13
Quick recapIn 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
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 TIP: visit it on your mobile device!
PhoneGap site: http://www.phonegap.com
Wednesday, September 25, 13
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 11mins)
Up and Running with PhoneGap (1hrs 57mins)
HTML5 for Flash Developers (3hrs 16mins)
and many more HTML5 videos!
Wednesday, September 25, 13
Reflecting on HTML5
HTML5 is approachable tech
Easy to explore
Useful for mobile dev
Here to stay
Cause for reflection
Wednesday, September 25, 13