Your SlideShare is downloading. ×
0
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
HTML5のご紹介
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5のご紹介

3,959

Published on

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

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,959
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
8
Embeds 0
No embeds

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 )

×