This document provides an introduction to HTML5 and discusses the evolution of the web. It notes that the web is changing from a single device experience to a multi-device one, and from thin clients to thick applications. It shows how browser platforms and programming languages have diversified for smartphones. The document highlights how HTML5 is bringing new capabilities like geolocation, video, audio and graphics to the web in a standardized way. It encourages keeping up with browser support and using polyfills and frameworks. Finally, it speculates about how the mobile web may gain access to device APIs and become more like a mobile platform itself.

1. An introduction to HTML 5
@ jamespearce

2. Single device Multi device
Sedentary user Mobile user
*
Declarative Imperative
Thin client Thick client
Documents Applications
* or supine, or sedentary, or passive, or...

3. A badge for all these ways
the web is changing

4. MS
RIM
Google
Apple
Top US Smartphone Platforms
August 2011, comScore MobiLens

5. C#
J2ME/Air
Java/C++
Obj-C
Native programming languages you’ll need
US Smartphones, August 2011

6. IE
WebKit
WebKit
WebKit
Browser platforms to target
US Smartphones, August 2011

7. There is no WebKit on Mobile
- @ppk

8. But at least we are using
one language,
one markup,
one style system

9. One Stack

12. Camera WebFont Video Audio Graphics
HTTP
Location
CSS Styling & Layout AJAX
Contacts
Events
SMS JavaScript
Sockets
Orientation
Semantic HTML SSL
Gyro
File Systems Workers &
Cross-App
Databases Parallel
Messaging
App Caches Processing
(all the elements of a modern application platform)

15. Are we nearly there yet?

16. IE Chrome Safari Firefox iOS BBX Android
@font-face
Canvas
HTML5 Audio & Video
rgba(), hsla()
border-image:
border-radius:
box-shadow:
text-shadow:
opacity:
Multiple backgrounds
Flexible Box Model
CSS Animations
CSS Columns
CSS Gradients
CSS Reflections
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions
Geolocation API
local/sessionStorage
SVG/SVG Clipping
SMIL
Inline SVG
Drag and Drop
hashchange
X-window Messaging
History Management
applicationCache
Web Sockets
Web Workers
Web SQL Database
WebGL
IndexedDB

17. Stay on top of diversity
Can I Use?
http://caniuse.com
Modernizr
http://modernizr.com
DeviceAtlas
http://deviceatlas.com

18. 100%
Support
Browsers
Capabilities & specifications

19. 100%
Support
Browsers Polyfills Frameworks
Capabilities & specifications

21. The classic web architecture
request
User interface Rendering
response
Business logic
Storage
server client

22. A new web architecture
User interface
sync
API Business logic
Storage Storage
server client

23. But there is a
a place for both

26. Recent developments

27. iOS 5
Input types
contenteditable
position:fixed
classList
XHR2
Script defer & async
Inline SVG
Web Workers

28. overflow: scroll;
-webkit-overflow-scrolling: touch;

29. http://jamesgpearce.github.com/compios5/

30. window.addEventListener('deviceorientation', function(e) {
var heading = e.webkitCompassHeading + window.orientation;
spinner.style.webkitTransform = 'rotateZ(-' + heading + 'deg)';
}, false);

31. Android 4
SVG at all
CSS3 3D transforms
classList
XHR2
Script defer & async
<details> & <summary>
File reader
Device orientation
Navigation timing

32. window.performance

33. <input type="file" id="picker"
accept="image/*"
capture="camera"
>
// camcorder
// microphone
// filesystem
var image = picker.files[0];

34. We haven’t even started

35. What does the web look
like when you have...

36. Camera
Microphone
Contacts
Calendar
Messaging
Telephony
NFC
?

37. Media Capture (HTML) Media Capture (API)
Battery status Application Registration
Contacts Calendar
Messaging (SMS, MMS...) Feature Permissions
Network Information API Sensor API
Vibration API
Menu API
Audio Volume
Permissions for APIs
Beep
Gallery
Systems info and events
Tasks

38. Accelerometer APDU (SmartCard)
Orientation Bluetooth
Camera Crypto
DeviceStatus DLNA
Filesystem Server Push
Messaging Sensor
Geolocation Telephony
PIM
Contacts
Calendar
Tasks
DeviceInteraction

39. Telephony
Messaging
Contacts
Clock
Camera
Filesystem
Calculator
Device Status
Settings
Accelerometer
Mouse Lock
Maps

40. Mobile device APIs
- the web’s great leap forward

41. The mobile web
becomes more than a
320px web

42. window.addEventListener(
'appointmentdue',
function(appt) {
if (device.near(WORK)) {
siri.remind(
contacts.get('Peter'),
calendar.getDetails(appt)
);
}
},
false
);
(PS: This code does not work. Yet.)

43. built with
Apps vs web technology

44. James Pearce
@ jamespearce