HTML5 & Javascript

      by Mike Taylor
       @miketaylr




1
2




HTML5
3




 HTML5                           “HTML5”
• Canvas   2D Context            • Web Workers

• Microdata   (& vocabulari...
4




HTML5
5
5




Webapps‽
 http://bit.ly/webapps-complete
6
7




OUTLINE
• Constraint   validation API

• Canvas   2dContext API

• localStorage API

• Geolocation API

• Life-chang...
8




CONSTRAINT VALIDATION
9




CONSTRAINT VALIDATION API

el.willValidate

el.setCustomValidity(msg)

el.checkValidity()

el.validationMessage
10




CONSTRAINT VALIDATION API
el.validity.valueMissing      required

el.validity.typeMismatch      type

el.validity.p...
11
12




      Demos!
http://miketaylr.com/pres/ncjs/

    (http://bit.ly/ncjs-mt)
13




Example 1.1 Type validation
14




Example 1.2 Pattern validation
15




<CANVAS>
16
17
18
19
20




CANVAS 2D CONTEXT API
Transformations
Compositing
Colors and styles
Line styles
Shadows
Simple shapes (rectangles)
...
20




CANVAS 2D CONTEXT API
Transformations
Compositing
Colors and styles
Line styles
Shadows
Simple shapes (rectangles)
...
21




  Example 2.1 Canvas Paths
var
22




      Example 2.2 Canvas Rectangle

var
23




  Example 2.4 Canvas image

var




                      c
24




  Example 2.5 Canvas text


var




                      c
25




  Example 2.6 Canvas shadow

var




                     c
26




GEOLOCATION
27




        GEOLOCATION API
getCurrentPosition(success, error, options)

watchPosition(success, error, options)

option...
28




     GEOLOCATION API
position.coords.latitute
position.coords.longitude
position.coords.altitude
position.coords.ac...
29




Example 3 Geolocation




                    c
30
31




Putting it all together*




                *um, kinda.
32




            Demo!

http://miketaylr.com/pres/ncjs/app/
33




Thanks!
Upcoming SlideShare
Loading in...5
×

Html5 Javascript APIs

3,192

Published on

This talk introduces the HTML5 geolocation API, the Canvas 2dContext API, and web forms 2.0 constraint validation API.

It also has a picture of Napoleon riding a pink horse.

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,192
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
105
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Html5 Javascript APIs

    1. 1. HTML5 & Javascript by Mike Taylor @miketaylr 1
    2. 2. 2 HTML5
    3. 3. 3 HTML5 “HTML5” • Canvas 2D Context • Web Workers • Microdata (& vocabularies) • Web Storage • Cross-document messaging • Web Sockets (API & protocol) • Channel messaging • Server-side events • Forms • Geolocation API • SVG, MathML, XHR2
    4. 4. 4 HTML5
    5. 5. 5
    6. 6. 5 Webapps‽ http://bit.ly/webapps-complete
    7. 7. 6
    8. 8. 7 OUTLINE • Constraint validation API • Canvas 2dContext API • localStorage API • Geolocation API • Life-changing demo™
    9. 9. 8 CONSTRAINT VALIDATION
    10. 10. 9 CONSTRAINT VALIDATION API el.willValidate el.setCustomValidity(msg) el.checkValidity() el.validationMessage
    11. 11. 10 CONSTRAINT VALIDATION API el.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
    12. 12. 11
    13. 13. 12 Demos! http://miketaylr.com/pres/ncjs/ (http://bit.ly/ncjs-mt)
    14. 14. 13 Example 1.1 Type validation
    15. 15. 14 Example 1.2 Pattern validation
    16. 16. 15 <CANVAS>
    17. 17. 16
    18. 18. 17
    19. 19. 18
    20. 20. 19
    21. 21. 20 CANVAS 2D CONTEXT API Transformations Compositing Colors and styles Line styles Shadows Simple shapes (rectangles) Complex shapes (paths) Focus management Text Images Pixel manipulation
    22. 22. 20 CANVAS 2D CONTEXT API Transformations Compositing Colors and styles Line styles Shadows Simple shapes (rectangles) Complex shapes (paths) Focus management Text Images Pixel manipulation
    23. 23. 21 Example 2.1 Canvas Paths var
    24. 24. 22 Example 2.2 Canvas Rectangle var
    25. 25. 23 Example 2.4 Canvas image var c
    26. 26. 24 Example 2.5 Canvas text var c
    27. 27. 25 Example 2.6 Canvas shadow var c
    28. 28. 26 GEOLOCATION
    29. 29. 27 GEOLOCATION API getCurrentPosition(success, error, options) watchPosition(success, error, options) options: enableHighAccuracy, timeout maximumAge
    30. 30. 28 GEOLOCATION API position.coords.latitute position.coords.longitude position.coords.altitude position.coords.accuracy position.coords.altituteAccuracy position.coords.heading position.coords.speed
    31. 31. 29 Example 3 Geolocation c
    32. 32. 30
    33. 33. 31 Putting it all together* *um, kinda.
    34. 34. 32 Demo! http://miketaylr.com/pres/ncjs/app/
    35. 35. 33 Thanks!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×