html5 & javascript - mike taylor · html5 & javascript by mike taylor @miketaylr 1...

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