an intro to mobile html5
TRANSCRIPT
![Page 1: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/1.jpg)
An introduction to HTML 5
@ jamespearce
![Page 2: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/2.jpg)
Single deviceSedentary userDeclarativeThin client Documents
Multi deviceMobile userImperative
Thick client Applications
*
* or supine, or sedentary, or passive, or...
![Page 3: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/3.jpg)
A badge for all these waysthe web is changing
![Page 4: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/4.jpg)
MS
RIM
Apple
Top US Smartphone PlatformsAugust 2011, comScore MobiLens
![Page 5: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/5.jpg)
C#
J2ME/Air
Obj-C
Java/C++
Native programming languages you’ll needUS Smartphones, August 2011
![Page 6: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/6.jpg)
IE
WebKit
WebKit
WebKit
Browser platforms to targetUS Smartphones, August 2011
![Page 7: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/7.jpg)
There is no WebKit on Mobile- @ppk
![Page 8: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/8.jpg)
But at least we are usingone language,one markup,
one style system
![Page 9: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/9.jpg)
One Stack
![Page 10: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/10.jpg)
![Page 11: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/11.jpg)
![Page 12: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/12.jpg)
Workers & Parallel
Processing
File SystemsDatabasesApp Caches
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont Video Audio Graphics
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
HTTP
AJAX
Events
Sockets
SSL
(all the elements of a modern application platform)
![Page 13: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/13.jpg)
![Page 14: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/14.jpg)
![Page 15: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/15.jpg)
Are we nearly there yet?
![Page 16: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/16.jpg)
IE Chrome Safari Firefox iOS BBX Android@font-face
CanvasHTML5 Audio & Video
rgba(), hsla()border-image:border-radius:
box-shadow:text-shadow:
opacity:Multiple backgrounds
Flexible Box ModelCSS Animations
CSS ColumnsCSS Gradients
CSS ReflectionsCSS 2D TransformsCSS 3D Transforms
CSS TransitionsGeolocation API
local/sessionStorageSVG/SVG Clipping
SMILInline SVG
Drag and Drophashchange
X-window MessagingHistory Management
applicationCacheWeb SocketsWeb Workers
Web SQL DatabaseWebGL
IndexedDB
![Page 17: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/17.jpg)
Stay on top of diversity
Can I Use?http://caniuse.com
Modernizrhttp://modernizr.com
DeviceAtlashttp://deviceatlas.com
![Page 18: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/18.jpg)
Capabilities & specifications
Supp
ort 100%
Browsers
![Page 19: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/19.jpg)
Capabilities & specifications
100%
Polyfills
Supp
ort
Frameworks Browsers
![Page 20: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/20.jpg)
![Page 21: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/21.jpg)
The classic web architecture
Storage
Business logic
User interfacerequest
Rendering
server client
response
![Page 22: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/22.jpg)
A new web architecture
Storage
Business logic
User interfacesync
server client
Storage
API
![Page 23: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/23.jpg)
But there is aa place for both
![Page 24: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/24.jpg)
![Page 25: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/25.jpg)
![Page 26: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/26.jpg)
Recent developments
![Page 27: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/27.jpg)
iOS 5
Input typescontenteditableposition:fixedclassListXHR2Script defer & asyncInline SVGWeb Workers
![Page 28: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/28.jpg)
overflow: scroll;-webkit-overflow-scrolling: touch;
![Page 29: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/29.jpg)
http://jamesgpearce.github.com/compios5/
![Page 30: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/30.jpg)
window.addEventListener('deviceorientation', function(e) {
var heading = e.webkitCompassHeading + window.orientation;
spinner.style.webkitTransform = 'rotateZ(-' + heading + 'deg)';
}, false);
![Page 31: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/31.jpg)
Android 4
SVG at allCSS3 3D transformsclassListXHR2Script defer & async<details> & <summary>File readerDevice orientationNavigation timing
![Page 32: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/32.jpg)
window.performance
![Page 33: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/33.jpg)
<input type="file" id="picker" accept="image/*" capture="camera">
// camcorder// microphone// filesystem
var image = picker.files[0];
![Page 34: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/34.jpg)
We haven’t even started
![Page 35: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/35.jpg)
What does the web looklike when you have...
![Page 36: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/36.jpg)
CameraMicrophone
ContactsCalendar
MessagingTelephony
NFC?
![Page 37: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/37.jpg)
Media Capture (HTML)
Battery status
Contacts
Messaging (SMS, MMS...)
Network Information API
Media Capture (API)
Application Registration
Calendar
Feature Permissions
Sensor API
Vibration API
Menu API
Permissions for APIsAudio Volume
Beep
Gallery
Systems info and events
Tasks
![Page 38: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/38.jpg)
Accelerometer
Orientation
Camera
DeviceStatus
Filesystem
Messaging
Geolocation
PIM
Contacts
Calendar
Tasks
DeviceInteraction
APDU (SmartCard)
Bluetooth
Crypto
DLNA
Server Push
Sensor
Telephony
![Page 39: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/39.jpg)
Telephony
Messaging
Contacts
Clock
Camera
Filesystem
Calculator
Device Status
Settings
Accelerometer
Mouse Lock
Maps
![Page 40: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/40.jpg)
Mobile device APIs- the web’s great leap forward
![Page 41: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/41.jpg)
The mobile webbecomes more than a
320px web
![Page 42: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/42.jpg)
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.)
![Page 43: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/43.jpg)
Apps vs web technologybuilt with
![Page 44: An Intro to Mobile HTML5](https://reader031.vdocuments.mx/reader031/viewer/2022020207/55514ef2b4c905f2288b53a0/html5/thumbnails/44.jpg)
James Pearce @ jamespearce