HTML5 & Javascript - Mike Taylor · HTML5 & Javascript by Mike Taylor @miketaylr 1 Saturday,...
35
HTML5 & Javascript by Mike Taylor @miketaylr 1 Saturday, February 20, 2010
Transcript of HTML5 & Javascript - Mike Taylor · HTML5 & Javascript by Mike Taylor @miketaylr 1 Saturday,...
HTML5 & Javascript
by Mike Taylor@miketaylr
1
Saturday, February 20, 2010
2
HTML5
Saturday, February 20, 2010
3
• Canvas 2D Context
•Microdata (& vocabularies)
• Cross-document messaging
• Channel messaging
• Forms
•Web Workers
•Web Storage
•Web Sockets (API & protocol)
• Server-side events
• Geolocation API
• SVG, MathML, XHR2
HTML5 “HTML5”
Saturday, February 20, 2010
4
HTML5
Saturday, February 20, 2010
5
Saturday, February 20, 2010
5
http://bit.ly/webapps-complete
Webapps‽
Saturday, February 20, 2010
6
Saturday, February 20, 2010
7
• Constraint validation API
• Canvas 2dContext API
• localStorage API
• Geolocation API
• Life-changing demo™
OUTLINE
Saturday, February 20, 2010
8
CONSTRAINT VALIDATION
Saturday, February 20, 2010
9
CONSTRAINT VALIDATION API
el.willValidate
el.setCustomValidity(msg)
el.checkValidity()
el.validationMessage
Saturday, February 20, 2010
10
CONSTRAINT VALIDATION APIel.validity.valueMissing required
el.validity.typeMismatch type
el.validity.patternMismatch pattern
el.validity.tooLong maxlength
el.validity.rangeUnderflow min
el.validity.rangeOverflow max
el.validity.stepMismatch step
el.validity.customError N/A
el.validity.valid N/A
Saturday, February 20, 2010
11
Saturday, February 20, 2010
12
http://miketaylr.com/pres/ncjs/
(http://bit.ly/ncjs-mt)
Demos!
Saturday, February 20, 2010
13
Example 1.1 Type validation
Saturday, February 20, 2010
14
Example 1.2 Pattern validation
Saturday, February 20, 2010
15
<CANVAS>
Saturday, February 20, 2010
16
Saturday, February 20, 2010
17
Saturday, February 20, 2010
18
Saturday, February 20, 2010
19
Saturday, February 20, 2010
20
CANVAS 2D CONTEXT APITransformations
Compositing
Colors and styles
Line styles
Shadows
Simple shapes (rectangles)
Complex shapes (paths)
Focus management
Text
Images
Pixel manipulation
Saturday, February 20, 2010
20
CANVAS 2D CONTEXT APITransformations
Compositing
Colors and styles
Line styles
Shadows
Simple shapes (rectangles)
Complex shapes (paths)
Focus management
Text
Images
Pixel manipulation
☞☞☞☞
☞☞
☞
Saturday, February 20, 2010
21
Example 2.1 Canvas Pathsvar
Saturday, February 20, 2010
22
Example 2.2 Canvas Rectangle
var
Saturday, February 20, 2010
23
c
Example 2.4 Canvas image
var
Saturday, February 20, 2010
24
c
Example 2.5 Canvas text
var
Saturday, February 20, 2010
25
c
Example 2.6 Canvas shadow
var
Saturday, February 20, 2010
26
GEOLOCATION
Saturday, February 20, 2010
27
GEOLOCATION API
getCurrentPosition(success, error, options)
watchPosition(success, error, options)
options: enableHighAccuracy, timeout maximumAge
Saturday, February 20, 2010
28
GEOLOCATION API
position.coords.latituteposition.coords.longitudeposition.coords.altitudeposition.coords.accuracyposition.coords.altituteAccuracyposition.coords.headingposition.coords.speed
Saturday, February 20, 2010
29
c
Example 3 Geolocation
Saturday, February 20, 2010
30
Saturday, February 20, 2010
31
Putting it all together*
*um, kinda.
Saturday, February 20, 2010
32
http://miketaylr.com/pres/ncjs/app/
Demo!
Saturday, February 20, 2010
33
Thanks!
Saturday, February 20, 2010
