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

HTML5のご紹介

on

  • 4,508 views

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

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

Statistics

Views

Total Views
4,508
Views on SlideShare
4,501
Embed Views
7

Actions

Likes
7
Downloads
31
Comments
0

2 Embeds 7

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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のご紹介 HTML5のご紹介 Presentation Transcript

  • HTML DevFestX Sapporo 2012/2/11 Toru Yoshikawa ( @yoshikawa_t )
  • 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/
  • • HTML5• HTML5 API View slide
  • HTML5• 1999 HTML4.01 10•• WHATWG Web Applications 1.0 Web Forms 2.0 W3C• 2014 View slide
  • W3C1. Working Draft2. Last Call Working Draft ←3. Candidate Recommendation4. Proposed Recommendation5. Recommendation
  • HTML5 W3C XHTML1.0 HTML XHTML1998 XHTML2.0 XHTML ... Ajax Web2.0 Web W3C HTML2004
  • HTML5 Apple Mozilla Opera WHATWG Web Hypertext Application Technology2004 Working Group HTML5 Web2007 W3C WHATWG2008 W3C HTML5
  • HTML52009 XHTML2.0 HTML5 Last Call Working2011 DraftNOW
  • HTML5• HTML5• HTML5
  • • 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
  • 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/offline events … /
  • 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• XMLHttpRequest Level2 …• Notifications …• WebRTC … /
  • 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 API …• Network Information API …
  • Device Access Demo• Ball Pool• Google Gravity• data: text/html, <input type="text" x-webkit- speech style="font-size: 64px;"> ※
  • Semantics
  • Semantics• … header/footer/section/article 108 30 14• … menu/progress/meter• HTML5 Forms … input type search/email/date/ range/color• Microdata … itemscope/itemprop
  • 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 …• Webfonts …• Transforms …• Transitions/Animations … CSS
  • 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 PleaseHTML5 Cross Browser Polyfills
  • 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
  • html5j.org http://www.html5j.org/
  • Thank You!!Toru Yoshikawa ( @yoshikawa_t )