0
HTML                     DevFestX Sapporo                            2012/2/11       Toru Yoshikawa ( @yoshikawa_t )
Toru Yoshikawa@yoshikawa_t•   Google API Expert     Chrome•   html5j.org            / HTML5•   Web                        ...
• HTML5• HTML5   API
HTML5•   1999               HTML4.01        10••   WHATWG      Web Applications 1.0        Web    Forms 2.0            W3C...
W3C1.     Working Draft2.         Last Call Working Draft ←3.         Candidate Recommendation4.       Proposed Recommenda...
HTML5         W3C    XHTML1.0         HTML          XHTML1998                                       XHTML2.0              ...
HTML5        Apple   Mozilla   Opera         WHATWG          Web Hypertext Application Technology2004    Working Group    ...
HTML52009    XHTML2.0        HTML5      Last Call Working2011        DraftNOW
HTML5•       HTML5•           HTML5
•   HTML5    -   Semantic Elements    -   Multimedia Elements    -   HTML5 Forms    -   Event model & APIs    -   Offline E...
HTML5WebHTML5   …
HTML5The Web platform: Browser technologieshttp://platform.html5.org/
Offline & Storage
Offline & Storage• Application Cache …• Web Storage …• Indexed Database … KVS• File APIs …• File System API …• online/offlin...
Offline & Storage Demo• HTML5 Terminal
Multimedia
Multimedia• video/audio …     /• WebVTT …• Web Audio API …• HTML Media Capture …
Multimedia  Demo• Blowing apart fragments of video• Using WebSRT to create video captions• HTML5 Wow Visualizer
Graphics, 3D & Effects
Graphics, 3D & Effects• Canvas …• WebGL … 3D• SVG …
Graphics, 3D & Effects  Demo• 3D Nyan Cat!!!!• WebGL City
Realtime / Connectivity
Realtime / Connectivity•   WebSocket …•   Server-Sent Events …               /Comet•   Web Messaging … Web•   XMLHttpReque...
Realtime / Connectivity Demo• WebRTC Video Element Demo ※chrome dev channel   -enable-media-stream
Device Access
Device Access• Geolocation API … GPS• Speech Input …• Device Orientation …• Contacts API …• Calendar API …• Battery Status...
Device Access    Demo•   Ball Pool•   Google Gravity•   data: text/html, <input type="text" x-webkit-    speech style="fon...
Semantics
Semantics•                     … header/footer/section/article        108              30                     14•         ...
Semantics Demo• Web Forms 2.0 demo page ※Opera
CSS3 / Styling
CSS3 / Styling• CSS3 Selectors … :first-child/:nth-child(odd)• border-radius …• text-shadow/box-shadow …• gradient …• Webfo...
CSS3 / Styling    Demo•   Button Maker•   Round corners - HTML5Rokcs %23 #•   CSS3 Patterns Gallery•   CSS Clock
When can I useMobile HTML5
PolyfillA shim that mimics a future API providing fallbackfunctionality to older browsers. - Paul Irish       APIHTML5 Plea...
HTML5Rockshttp://www.html5rocks.com/en/Chrome Experimentshttp://www.chromeexperiments.com/Chromium sampleshttp://chromium....
html5j.org      http://www.html5j.org/
Thank You!!Toru Yoshikawa ( @yoshikawa_t )
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
Upcoming SlideShare
Loading in...5
×

HTML5のご紹介

3,979

Published on

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

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

No Downloads
Views
Total Views
3,979
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
33
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5のご紹介"

  1. 1. HTML DevFestX Sapporo 2012/2/11 Toru Yoshikawa ( @yoshikawa_t )
  2. 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. 3. • HTML5• HTML5 API
  4. 4. HTML5• 1999 HTML4.01 10•• WHATWG Web Applications 1.0 Web Forms 2.0 W3C• 2014
  5. 5. W3C1. Working Draft2. Last Call Working Draft ←3. Candidate Recommendation4. Proposed Recommendation5. Recommendation
  6. 6. HTML5 W3C XHTML1.0 HTML XHTML1998 XHTML2.0 XHTML ... Ajax Web2.0 Web W3C HTML2004
  7. 7. HTML5 Apple Mozilla Opera WHATWG Web Hypertext Application Technology2004 Working Group HTML5 Web2007 W3C WHATWG2008 W3C HTML5
  8. 8. HTML52009 XHTML2.0 HTML5 Last Call Working2011 DraftNOW
  9. 9. HTML5• HTML5• HTML5
  10. 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. 11. HTML5WebHTML5 …
  12. 12. HTML5The Web platform: Browser technologieshttp://platform.html5.org/
  13. 13. Offline & Storage
  14. 14. Offline & Storage• Application Cache …• Web Storage …• Indexed Database … KVS• File APIs …• File System API …• online/offline events … /
  15. 15. Offline & Storage Demo• HTML5 Terminal
  16. 16. Multimedia
  17. 17. Multimedia• video/audio … /• WebVTT …• Web Audio API …• HTML Media Capture …
  18. 18. Multimedia Demo• Blowing apart fragments of video• Using WebSRT to create video captions• HTML5 Wow Visualizer
  19. 19. Graphics, 3D & Effects
  20. 20. Graphics, 3D & Effects• Canvas …• WebGL … 3D• SVG …
  21. 21. Graphics, 3D & Effects Demo• 3D Nyan Cat!!!!• WebGL City
  22. 22. Realtime / Connectivity
  23. 23. Realtime / Connectivity• WebSocket …• Server-Sent Events … /Comet• Web Messaging … Web• XMLHttpRequest Level2 …• Notifications …• WebRTC … /
  24. 24. Realtime / Connectivity Demo• WebRTC Video Element Demo ※chrome dev channel -enable-media-stream
  25. 25. Device Access
  26. 26. Device Access• Geolocation API … GPS• Speech Input …• Device Orientation …• Contacts API …• Calendar API …• Battery Status API …• Network Information API …
  27. 27. Device Access Demo• Ball Pool• Google Gravity• data: text/html, <input type="text" x-webkit- speech style="font-size: 64px;"> ※
  28. 28. Semantics
  29. 29. Semantics• … header/footer/section/article 108 30 14• … menu/progress/meter• HTML5 Forms … input type search/email/date/ range/color• Microdata … itemscope/itemprop
  30. 30. Semantics Demo• Web Forms 2.0 demo page ※Opera
  31. 31. CSS3 / Styling
  32. 32. CSS3 / Styling• CSS3 Selectors … :first-child/:nth-child(odd)• border-radius …• text-shadow/box-shadow …• gradient …• Webfonts …• Transforms …• Transitions/Animations … CSS
  33. 33. CSS3 / Styling Demo• Button Maker• Round corners - HTML5Rokcs %23 #• CSS3 Patterns Gallery• CSS Clock
  34. 34. When can I useMobile HTML5
  35. 35. PolyfillA shim that mimics a future API providing fallbackfunctionality to older browsers. - Paul Irish APIHTML5 PleaseHTML5 Cross Browser Polyfills
  36. 36. HTML5Rockshttp://www.html5rocks.com/en/Chrome Experimentshttp://www.chromeexperiments.com/Chromium sampleshttp://chromium.googlecode.com/svn/trunk/samples/Internet Explorer 10 Test Drivehttp://ie.microsoft.com/testdrive/html5wowhttp://www.htmlfivewow.com/ HTML5http://www.slideshare.net/shumpei/html5-11207810
  37. 37. html5j.org http://www.html5j.org/
  38. 38. Thank You!!Toru Yoshikawa ( @yoshikawa_t )
  1. A particular slide catching your eye?

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

×