2011/2/11に札幌で行われたDevFestX Sapporoでのセッション「HTML5のご紹介・Googe Chromeの最新APIの紹介」の前半資料です。

1. HTML
DevFestX Sapporo
2012/2/11
Toru Yoshikawa ( @yoshikawa_t )

2. Toru Yoshikawa
@yoshikawa_t
• Google API Expert Chrome
• html5j.org / HTML5
• Web Chrome Web Store Apps
• allWeb jQuery Mobile
• http://d.hatena.ne.jp/pikotea/

3. • HTML5
• HTML5 API

4. HTML5
• 1999 HTML4.01 10
•
• WHATWG Web Applications 1.0 Web
Forms 2.0 W3C
• 2014

5. W3C
1. Working Draft
2. Last Call Working Draft ←
3. Candidate Recommendation
4. Proposed Recommendation
5. Recommendation

6. HTML5
W3C XHTML1.0
HTML XHTML
1998
XHTML2.0
XHTML
... Ajax Web2.0
Web
W3C HTML
2004

7. HTML5
Apple Mozilla Opera WHATWG
Web Hypertext Application Technology
2004 Working Group
HTML5 Web
2007 W3C WHATWG
2008 W3C HTML5

8. HTML5
2009 XHTML2.0
HTML5 Last Call Working
2011
Draft
NOW

9. HTML5
• HTML5
• HTML5

10. • HTML5
- Semantic Elements
- Multimedia Elements
- HTML5 Forms
- Event model & APIs
- Offline Events
- Drag & Drop API
- HTML5 Parser
• HTML Canvas 2D Context
• HTML Microdata
• HTML5 Web Messaging

11. HTML5
Web
HTML5 …

12. HTML5
The Web platform: Browser technologies
http://platform.html5.org/

14. Offline & Storage

15. Offline & Storage
• Application Cache …
• Web Storage …
• Indexed Database … KVS
• File APIs …
• File System API …
• online/offline events … /

16. Offline & Storage
Demo
• HTML5 Terminal

17. Multimedia

18. Multimedia
• video/audio … /
• WebVTT …
• Web Audio API …
• HTML Media Capture …

19. Multimedia
Demo
• Blowing apart fragments of video
• Using WebSRT to create video captions
• HTML5 Wow Visualizer

20. Graphics, 3D & Effects

21. Graphics, 3D & Effects
• Canvas …
• WebGL … 3D
• SVG …

22. Graphics, 3D & Effects
Demo
• 3D Nyan Cat!!!!
• WebGL City

23. Realtime / Connectivity

24. Realtime / Connectivity
• WebSocket …
• Server-Sent Events …
/Comet
• Web Messaging … Web
• XMLHttpRequest Level2 …
• Notifications …
• WebRTC … /

25. Realtime / Connectivity
Demo
• WebRTC Video Element Demo
※chrome dev channel -enable-media-stream

26. Device Access

27. Device Access
• Geolocation API … GPS
• Speech Input …
• Device Orientation …
• Contacts API …
• Calendar API …
• Battery Status API …
• Network Information API …

28. Device Access
Demo
• Ball Pool
• Google Gravity
• data: text/html, <input type="text" x-webkit-
speech style="font-size: 64px;">
※

29. Semantics

30. Semantics
• … header/footer/section/article
108 30 14
• … menu/progress/meter
• HTML5 Forms … input type search/email/date/
range/color
• Microdata … itemscope/itemprop

31. Semantics
Demo
• Web Forms 2.0 demo page
※Opera

32. CSS3 / Styling

33. CSS3 / Styling
• CSS3 Selectors … :first-child/:nth-child(odd)
• border-radius …
• text-shadow/box-shadow …
• gradient …
• Webfonts …
• Transforms …
• Transitions/Animations … CSS

34. CSS3 / Styling
Demo
• Button Maker
• Round corners - HTML5Rokcs %23 #
• CSS3 Patterns Gallery
• CSS Clock

36. When can I use
Mobile HTML5

37. Polyfill
A shim that mimics a future API providing fallback
functionality to older browsers. - Paul Irish
API
HTML5 Please
HTML5 Cross Browser Polyfills

39. HTML5Rocks
http://www.html5rocks.com/en/
Chrome Experiments
http://www.chromeexperiments.com/
Chromium samples
http://chromium.googlecode.com/svn/trunk/samples/
Internet Explorer 10 Test Drive
http://ie.microsoft.com/testdrive/
html5wow
http://www.htmlfivewow.com/
HTML5
http://www.slideshare.net/shumpei/html5-11207810

40. html5j.org
http://www.html5j.org/

41. Thank You!!
Toru Yoshikawa ( @yoshikawa_t )