Human Factors of XR: Using Human Factors to Design XR Systems
HTML5 in Real World Applications
1. HTML5 in Real World Applications
#12NTChtml5
Frank Livaudais
#franklivaudais
2. Evaluate This Session!
Each entry is a chance to win an NTEN engraved iPad!
or Online using #12NTChtml5 at www.nten.org/ntc/eval
#franklivaudais Slide 1
#12NTChtml5
16. New APIs and Tags
#franklivaudais Slide 15
#12NTChtml5
17. HTML5 APIs
Messaging
Server Events
Geolocation
Local Storage
History
Offline Apps
Canvas Drag & Drop
Video & Audio Inline Editing
Web Sockets
Web Workers
#franklivaudais Slide 16
#12NTChtml5
18. Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}
#franklivaudais Slide 17
#12NTChtml5
19. Markup for Applications
<input id="donor-input" placeholder="You should see an autocomplete menu as you type"
list="amounts" />
<datalist id="amounts">
<option value="10" />
<option value=“100" />
<option value="1000" />
<option value="10000" />
</datalist>
Animated Progress bar:
<progress>working...</progress>
Donation Goal tracking:
<progress value="75" max="100”/>
#franklivaudais Slide 18
#12NTChtml5
20. Rich Snippets
Some supported formats:
• Reviews • Recipes
• People • Events
• Products • Music
• Business and organizations
#franklivaudais Slide 19
#12NTChtml5
21. Rich Snippets
<div>
My name is Bob Smith but people call me Smithy. Here is my home page: <a
href="http://www.example.com">www.example.com</a>
I live in Albuquerque, NM and work as an engineer at ACME Corp.
</div>
<div itemscope itemtype="http://data-vocabulary.org/Person">
My name is <span itemprop="name">Bob Smith</span>
but people call me <span itemprop="nickname">Smithy</span>.
Here is my home page:
<a href="http://www.example.com" itemprop="url">www.example.com</a>
I live in
<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">Albuquerque</span>,
<span itemprop="region">NM</span> </span>and work as an
<span itemprop="title">engineer</span> at
<span itemprop="affiliation">ACME Corp</span>.
</div>
#franklivaudais Slide 20
#12NTChtml5
26. Offline Data
• sessionStorage
• One session per tab/window
• Temporary key/value pairs
• Replaces cookies for session tracking
• Extensive javascript methods and events
• localStorage
• Global
• Persistent
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
localStorage.setItem(key, value);
localStorage.getItem(key);
#franklivaudais Slide 25
#12NTChtml5
27. Offline Data
• Client Side Databases
• SQLite – structured / relational data
• Asynchronous / call back based
• Fast
• Application Cache
• Store whole app offline (HTML, CSS, JS)
• Atomic updating
• Manifest file
#franklivaudais Slide 26
#12NTChtml5
28. Video and Audio
• Standardized way of embedding media
• Fallback when not supported
• Multiple streams in one element
• Full JavaScript API: errors, network state, controls, readyState, events
• Attributes for controls, poster, autoplay
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
#franklivaudais Slide 27
#12NTChtml5
30. Where is the traffic coming from?
Side Door: Google, Facebook, Bing, Twitter
Direct but intermittent
Direct: Bookmark or URL
Type of Traffic Technology to Use
Side Door: Search/Social HTML5 Mobile Web
Direct Native App
50/50 Both
#franklivaudais Slide 29
#12NTChtml5
31. Native Apps: The Good
User experience
– Better swipe events
– Multi-touch support
Access to device hardware
– GPS/Compass
– Camera/Microphone
– Accelerometer/Gyroscope
Background APIs
– Audio/VOIP
– Push notifications
High-performance 3D graphics (OpenGL)
Webserver not required
#franklivaudais Slide 30
#12NTChtml5
32. Native Apps: The Bad
Rigid advertising model (iAds)
Apple’s 30% in-app purchase tax
Apple doesn’t share subscriber data
App Store approval process
– Required for app updates
– Rejection for non-compliance
Managing deployment configurations
Esoteric tool set (Xcode/Objective-C)
Content accessibility
– Searchable on Google?
– Can I share a link to your content?
#franklivaudais Slide 31
#12NTChtml5
33. HTML5 Apps: The Good
App update path: hit refresh
Small number of deployment configurations
Development costs
– Similar skill set as traditional site
– Often only a “mobile skin” required
– Many developer tools + resources
Write once, publish once, view anywhere
Content accessibility
– Indexed by Google
– URLs may be shared
#franklivaudais Slide 32
#12NTChtml5
34. HTML5 Apps: The Bad
Internet access is required
Performance can degrade quickly
Consistent cross-browser experience
– Disparate Android resolutions
– May require multiple stylesheets
– Compatibility #1 source for bugs
Minimal access to device hardware
Requires permission for Geo location
Inconsistent adoption across devices
Webserver required
#franklivaudais Slide 33
#12NTChtml5
35. Considerations
HTML5 offers APIs for offline storage, geolocation and
device orientation. New multimedia features make it easy
to include graphical content without proprietary plugins.
<canvas> <audio> <video>
#franklivaudais Slide 34
#12NTChtml5
37. Financial Times
More than 700,000 people use
the Financial Times' Web-based
mobile application to access
news and other content, making
it more popular than the version
sold in Apple's App Store.
FT.com Managing Director Rob
Grimshaw, "People who are using
the app are spending much more
time with the content," he said. "They
are consuming about three times as
many pages through the app as they
are through the desktop in an
average visit."
#franklivaudais Slide 36
#12NTChtml5
40. Next Steps
#franklivaudais Slide 39
#12NTChtml5
41. Considerations
PhoneGap is an HTML5 app platform that allows
you to author native applications with Web
technologies and get access to APIs and app
stores.
#franklivaudais Slide 40
#12NTChtml5
42. Considerations
NimbleKit is an HTML5 app platform that allows
you to author native applications with Web
technologies and get access to APIs and app
stores.
#franklivaudais Slide 41
#12NTChtml5
43. Considerations
Sencha Touch allows you to develop mobile Web
apps that look and feel native on iPhone, Android
and BlackBerry touch devices.
#franklivaudais Slide 42
#12NTChtml5
44. Questions
Thanks
Frank Livaudais
#franklivaudais
flivaudais@cds-global.com
HTML5 in Real World Applications
#12NTChtml5
#franklivaudais Slide 43
#12NTChtml5
45. Evaluate This Session!
Each entry is a chance to win an NTEN engraved iPad!
or Online using #12NTChtml5 at www.nten.org/ntc/eval
#franklivaudais Slide 44
#12NTChtml5
