Html5 Javascript APIs
Upcoming SlideShare
Loading in...5
×
 

Html5 Javascript APIs

on

  • 4,601 views

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

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.

Statistics

Views

Total Views
4,601
Views on SlideShare
4,504
Embed Views
97

Actions

Likes
5
Downloads
100
Comments
0

3 Embeds 97

http://www.slideshare.net 67
http://speakerrate.com 29
https://romy1.basecamphq.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 Javascript APIs Html5 Javascript APIs Presentation Transcript

  • HTML5 & Javascript by Mike Taylor @miketaylr 1
  • 2 HTML5
  • 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 HTML5
  • 5
  • 5 Webapps‽ http://bit.ly/webapps-complete
  • 6
  • 7 OUTLINE • Constraint validation API • Canvas 2dContext API • localStorage API • Geolocation API • Life-changing demo™
  • 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.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
  • 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) Complex shapes (paths) Focus management Text Images Pixel manipulation
  • 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
  • 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) options: enableHighAccuracy, timeout maximumAge
  • 28 GEOLOCATION API position.coords.latitute position.coords.longitude position.coords.altitude position.coords.accuracy position.coords.altituteAccuracy position.coords.heading position.coords.speed
  • 29 Example 3 Geolocation c
  • 30
  • 31 Putting it all together* *um, kinda.
  • 32 Demo! http://miketaylr.com/pres/ncjs/app/
  • 33 Thanks!