html5 for mobile development

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

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 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