HTML5のご紹介
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

HTML5のご紹介

  • 4,633 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,633
On Slideshare
4,626
From Embeds
7
Number of Embeds
2

Actions

Shares
Downloads
31
Comments
0
Likes
7

Embeds 7

http://us-w1.rockmelt.com 6
http://akeytoti.jugem.jp 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. W3C1. Working Draft2. Last Call Working Draft ←3. Candidate Recommendation4. Proposed Recommendation5. Recommendation
  • 6. HTML5 W3C XHTML1.0 HTML XHTML1998 XHTML2.0 XHTML ... Ajax Web2.0 Web W3C HTML2004
  • 7. HTML5 Apple Mozilla Opera WHATWG Web Hypertext Application Technology2004 Working Group HTML5 Web2007 W3C WHATWG2008 W3C HTML5
  • 8. HTML52009 XHTML2.0 HTML5 Last Call Working2011 DraftNOW
  • 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. HTML5WebHTML5 …
  • 12. HTML5The Web platform: Browser technologieshttp://platform.html5.org/
  • 13. Offline & Storage
  • 14. Offline & Storage• Application Cache …• Web Storage …• Indexed Database … KVS• File APIs …• File System API …• online/offline events … /
  • 15. Offline & Storage Demo• HTML5 Terminal
  • 16. Multimedia
  • 17. Multimedia• video/audio … /• WebVTT …• Web Audio API …• HTML Media Capture …
  • 18. Multimedia Demo• Blowing apart fragments of video• Using WebSRT to create video captions• HTML5 Wow Visualizer
  • 19. Graphics, 3D & Effects
  • 20. Graphics, 3D & Effects• Canvas …• WebGL … 3D• SVG …
  • 21. Graphics, 3D & Effects Demo• 3D Nyan Cat!!!!• WebGL City
  • 22. Realtime / Connectivity
  • 23. Realtime / Connectivity• WebSocket …• Server-Sent Events … /Comet• Web Messaging … Web• XMLHttpRequest Level2 …• Notifications …• WebRTC … /
  • 24. Realtime / Connectivity Demo• WebRTC Video Element Demo ※chrome dev channel -enable-media-stream
  • 25. Device Access
  • 26. Device Access• Geolocation API … GPS• Speech Input …• Device Orientation …• Contacts API …• Calendar API …• Battery Status API …• Network Information API …
  • 27. Device Access Demo• Ball Pool• Google Gravity• data: text/html, <input type="text" x-webkit- speech style="font-size: 64px;"> ※
  • 28. Semantics
  • 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. Semantics Demo• Web Forms 2.0 demo page ※Opera
  • 31. CSS3 / Styling
  • 32. CSS3 / Styling• CSS3 Selectors … :first-child/:nth-child(odd)• border-radius …• text-shadow/box-shadow …• gradient …• Webfonts …• Transforms …• Transitions/Animations … CSS
  • 33. CSS3 / Styling Demo• Button Maker• Round corners - HTML5Rokcs %23 #• CSS3 Patterns Gallery• CSS Clock
  • 34. When can I useMobile HTML5
  • 35. PolyfillA shim that mimics a future API providing fallbackfunctionality to older browsers. - Paul Irish APIHTML5 PleaseHTML5 Cross Browser Polyfills
  • 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. html5j.org http://www.html5j.org/
  • 38. Thank You!!Toru Yoshikawa ( @yoshikawa_t )