Writing Ubiquitous HTML5 Applications
Jody Gustafson
Twitter: @JodyMGustafson
WorldTreeSoftware.com
Overview
Why use HTML5/CSS3?
Most useful HTML5 APIs
User input across devices
Most useful CSS3 styles
Why write HTML5/CSS3 apps?
Ubiquitous: runs on nearly any device
Desktop, tablet, smart phone
Write once, run everywhere
No installation required
Automatically updated
(nearly) Everything you need to create apps & games
Access to local resources limited
Browser Support
IE9 (OK)
IE10 (Better)
Chrome, Firefox
Safari, Android
caniuse.com
HTML5 APIs
Web Storage
File Reader
Data Attributes
Canvas
Audio
Web Storage
Web Storage
Stores data locally within the user's browser
Stored as key/value pairs
sessionStorage and localStorage
Both use same interface
Session vs. Local
Session
Data removed when the browser is closed
Local Storage
Data remains when the browser is closed
Useful for saving app state and user settings
Web Storage Limitations
Stores only strings
Convert objects to/from JSON string
Limited amount of space (5MB)
Shared among all apps in a domain
Beware of name collisions between apps
Prefix keys with app name
Easy way to share data between apps
Can get notified upon changes
Web Storage Access
Set values
localStorage["key"] = value;
localStorage.setItem("key", value);
Get values
var value = localStorage["key"];
var value = localStorage.getItem("key");
localStorage.removeItem("key");
Web Storage Location
Developer Tools - Resources - Local Storage
View, edit, delete items
Don't put sensitive info there!
File Reader
File Reader
Loads files from user's file system
User must choose files to load using file input
Also supports choosing files with drag and drop
readAsText() returns string
readAsArrayBuffer() returns byte array
readAsDataURL() returns data URL
Text File Reader Demo
File Writer?
Yes, but not widely supported
Still a working draft
Data Attributes
Data Attributes
Specify custom attributes on HTML elements
Prefix name with data-*
Use JQuery.data() to get/set values
Or element.dataset.camelCasedName
Not available in IE10
Data Attributes Usages
Associate custom data with an element
Bind inputs to data models (Data binding)
Bind clicks to actions (Action binding)
Eliminates binding events to individual controls
Boilerplate event handling code
Data Binding
First Name:
Last Name:
Twitter:
Add
Clear
Canvas
Canvas
Used to draw custom graphics
Defines an element in HTML
Defines an API for drawing
Canvas context defines the API
Get a 2D context: canvas.getContext("2d")
Canvas 2D API
Low level drawing API - paths & strokes
moveTo(), lineTo()
stroke(), fill()
Use any CSS color specifier
Hex, color name, rgb(), rgba(), hsl()
strokeStyle, fillStyle
Draw text
Draw gradients
Draw images
Scale, transform, translate
Canvas Demo
Canvas Pixels
Use getImageData() to get canvas pixels
Returns an array of bytes
Four bytes per pixel
Red, green, blue, alpha
You can modify the pixels
Use putImageData() to draw it back to canvas
Canvas Pixels Demo
Audio
Audio
Defines an element on the page or in memory
Can be controlled from JavaScript
High level API
play()
pause()
currentTime
volume [0..1]
Audio API
Can create in memory and control by API
Most supported audio types: ogg, mp3, wav
audio.canPlayType("mime-type")
Use canplaythrough event to wait for a clip to fully load
Allows you to load and cache files
Audio Performance
Good in desktop, getting better
Can play multiple clips at same time
Good response time
Doesn't work well on mobile
Android loads clips but slow response
iPhone won't load clips until played
initializing...
HTML5 Honorable Mention
Geolocation
Find user's location
Web Workers
Execute processes in another thread
Application Cache
Allows your app to run offline
Drag & Drop
Makes elements draggable
Can be used to select files
Input Types
Input Types
color
date
time
email
number
range
datalist
progress
33
Touch Input
Touch Input
Don't get click events on elements
Don't have mouse events
Touch devices support touch events
touchstart, touchmove, touchend
Event contains multiple touch points
Get coordinates from e.touches[i].pageX|pageY
Use event.preventDefault() to stop default touch behavior
CSS3
Useful CSS3 Styles
Rounded corners: border-radius
Shadows: box-shadow, text-shadow
Color with alpha: rgba(r, g, b, a)
Gradients: linear-gradient, radial-gradient
Text Shadow
CSS3 Transition
Animates CSS properties when they change
Gradually changes from one style to another
Like JQuery animation functions
Can transition number and color values
Provides visual feedback to user
Transition Demo
▼
Jody Gustafson
Senior Web Developer
Hagerty Insurance
(555) 555-2222
▼
Mike Miller
VP of Apps and Integration
Hagerty Insurance
(555) 555-1111
▼
Robert Staley
Web Developer
Hagerty Insurance
(555) 555-3333
Questions?
Min
Max
Spin!
0
1
2
3
4
The End.
WorldTreeSoftware.com