WHAT IS HTML5? (at CSS Nite Osaka)
Upcoming SlideShare
Loading in...5
×
 

WHAT IS HTML5? (at CSS Nite Osaka)

on

  • 4,093 views

 

Statistics

Views

Total Views
4,093
Views on SlideShare
3,958
Embed Views
135

Actions

Likes
3
Downloads
123
Comments
1

1 Embed 135

http://www.slideshare.net 135

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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…
  • what is H
    TML5?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • &#x3053;&#x3046;&#x3044;&#x3046;&#x65B9;&#x5411;&#x6027;&#x306B;&#x3088;&#x308A;&#x3001;&#x65E2;&#x5B58;&#x30D9;&#x30F3;&#x30C0;&#x306E;&#x5B9F;&#x88C5;&#x52AA;&#x529B;&#x3092;&#x7121;&#x70BA;&#x306B;&#x305B;&#x305A;&#x3001;&#x305D;&#x308C;&#x3089;&#x306E;API&#x306B;&#x4F9D;&#x5B58;&#x3057;&#x305F;&#x30D7;&#x30ED;&#x30B0;&#x30E9;&#x30E0;&#x306B;&#x300C;&#x6A19;&#x6E96;&#x300D;&#x306E;&#x304A;&#x58A8;&#x4ED8;&#x304D;&#x3092;&#x4E0E;&#x3048;&#x3089;&#x308C;&#x308B; <br />
  • <br />
  • <br />
  • Backward Compatibility&#x306B;&#x3064;&#x3044;&#x3066;&#x306F;&#x3001;&#x975E;&#x63A8;&#x5968;&#x306E;&#x8981;&#x7D20;&#x3082;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x304C;&#x30B5;&#x30DD;&#x30FC;&#x30C8;&#x3059;&#x3079;&#x304D;&#x3060;&#x3057;&#x3001; <br />
  • progress&#x8981;&#x7D20;&#x306F;textContent&#x3082;&#x30D1;&#x30FC;&#x30B9;&#x3059;&#x308B;&#x3002; <br /> HTML4&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3067;&#x898B;&#x308B;&#x3068;&#x3001;&#x8981;&#x7D20;&#x306E;&#x5185;&#x5074;&#x306E;&#x307F;&#x304C;&#x8868;&#x793A;&#x3055;&#x308C;&#x308B;&#x3002; <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

WHAT IS HTML5? (at CSS Nite Osaka) WHAT IS HTML5? (at CSS Nite Osaka) Presentation Transcript

  • WHAT IS HTML5? SHUMPEI SHIRAISHI HTML5-DEVELOPERS-JP/GOOGLE API EXPERT(HTML5)
  • WELCOME!
  • WHO IS THIS? View slide
  • SHUMPEI SHIRAISHI View slide
  • OPEN WEB TECHNOLOGY HTML5
  • MY ACTIVITY FOR HTML5
  • GOOGLE API EXPERT(HTML5) HTML5-DEVELOPERS-JP SOME ARTICLES @ @ 11 HTML5 @ HP ...
  • HTML5&API 2940 BP
  • HTML5 HTML
  • HTML5 HTML
  • HTML5 API ( )
  • HTML5 IS API
  • HTML5 IS API DOM “DOM5 HTML” HTML/XHTML JavaScript API
  • HTML5 IS API HTML/XHTML
  • “HTML5” IS AMBIGUOUS WORD “HTML5” API API API Web Workers/Web SQL Database/Web Storage/etc/etc/etc....
  • “HTML5” IS AMBIGUOUS WORD “Open Web Platform” HTML+CSS+JavaScript (+SVG) “ HTML5”
  • HTML5 IS VERY, VERY, VERY BIG
  • HTML5 ( HTML5 )
  • HTML5 IS VERY, VERY, VERY BIG
  • HTML5 IS VERY, VERY, VERY BIG
  • HTML5
  • SEMANTICS, ACCESSIBILITY PAVE THE COWPATHS HTML5 RICH INTERNET APPLICATIONS
  • ARE YOU READY?
  • HTML5 & ” PAVE THE COWPATHS”
  • ,
  • SEMANTICS, ACCESSIBILITY More Readable for Everyone
  • SEMANTICS, ACCESSIBILITY More Readable for Everyone
  • SEMANTICS, ACCESSIBILITY (section/article/nav/aside/...) (header/footer/time/command...) hidden (strong/small/b/i/address/menu...)
  • SEMANTICS, ACCESSIBILITY <div class=”header”> <h1>Site Title</h1> <div class=”site-nav”> <ul><li>Home</li><li>Profile</li><li>Settings</li></ul> </div> </div> <div class=”content”> <div class=”article”>Main Content <div class=”date”>2009/11/23 </div> <div class=”address”> <a href=”mailto:a@a.jp”> </a></div> </div> </div> <div class=”footer”> <div class=”copyright”>Copyright ...</div> </div>
  • SEMANTICS, ACCESSIBILITY <header> <h1>Site Title</h1> <nav> <ul><li>Home</li><li>Profile</li><li>Settings</li></ul> </nav> </header> <div class=”content”> <article>Main Content <time datetime=”2009-11-23”>2009/11/23 </time> <div> <address><a href=”mailto:a@a.jp”> </a></address></div> </article> </div> <footer> <small class=”copyright”>Copyright ...</small> </div>
  • “PAVE THE COWPATH”
  • Image by Noel Sarah Dietrich via Flickr
  • EXAMPLES OF “PAVE THE COWPATH” HTML contentEditable/designMode/document.execCommand() innerHTML Drag & Drop API ...
  • EXAMPLES OF “PAVE THE COWPATH” API IE6 Safari Firefox - Ian Hickson(HTML5 hito
  • HTML5 HTML5 HTML4 HTML5 HTML5
  • EXAMPLE OF COMPATIBILITY <progress> <progress value=75 max=100> ...[75 / 100]</progress> ...[75 / 100]
  • “This specification evolves HTML and its related APIs to ease the authoring of Web-based applications.” HTML5 Draft Standard - 13 Nov 2009 (Ian Hickson)
  • HTML5 & API • 2D & 3D • • Web • • • • • OS
  • HTML5 & API • 2D & 3D o HTML5 <canvas> element and API, SVG • o HTML5 <video>/<audio> element and API • Web o HTML5 <html manifest=attribute> and ApplicationCache • o HTML5 Cross Document Messaging, XHR Level2 • o Web Storage, Web SQL Database, Indexed Database API • o Web Workers • Server-Sent Events, Web Sockets o • OS o File API, Drag & Drop API
  • 2D & 3D HTML5 <canvas> element and API,SVG
  • HTML5 <canvas> element and API • <canvas> var canvas = document.getElementsById("c1"); var context = canvas.getContext("2d"); context.drawImage(...) • 2 o Canvas 2D Context 2 W3C ( ID "2d" o WebGL 3 Khronos ID "webgl"
  • SVG SVG Scalable Vector Graphics XML SVG W3C Wikipedia • IE9 SVG HTML SVG
  • SVG • IE9 SVG HTML SVG <!DOCTYPE html> <html> <svg> <path d="M 20 20 L 60 20 L 40 60 z" fill="green" stroke="red" stroke-width="3" /> </svg> </html>
  • HTML5 <video>/<audio> element and API
  • HTML5 <video>/<audio> element and API • <video> <audio> • src <source> URL <video src="sample.ogv"></video> <video>   <source src="sample.ogv"> </video> • JavaScript API DOM CSS OK
  • Web HTML5 <html manifest=attribute> and ApplicationCache
  • Web • Web • HTML/CSS/JavaScript/ Web
  • Web • html manifest hello.manifest CACHE MANIFEST hello.html hello.js hello.html <!DOCTYPE html> <html manifest="hello.manifest"> ... </html>
  • HTML5 Cross Document Messaging, XHR Level2
  • IE9 Ready! • iframe • onmessage postMessage()
  • XMLHttpRequest Level2 IE9 Ready! • IE8 o • form
  • Web Storage, Web SQL Database, Indexed Database API
  • Web Storage IE9 Ready! • o o • JavaScript •
  • Web SQL Database • • • Safari Chrome
  • Indexed Database API • • Web Storage o •
  • Web Workers
  • Web Workers • JavaScript API • JavaScript
  • Server-Sent Events, Web Sockets
  • Server-Sent Events • Comet o API o • DOM •
  • Web Sockets • o API W3C o IETF • • (^^;
  • OS File API, Drag & Drop API
  • File API • JavaScript API • •
  • 100%
  • HTML5
  • canvas IE XDM Video/Audio IE Web SQL Database Safari, Chrome Web Workers IE, Opera ...
  • HTTP://A.DEVERIA.COM/CANIUSE/
  • HTML5
  • Blowing apart fragments of Video • HTML5 o Video o Canvas 1.video canvas 2 2. video canvas 3. canvas
  • Movement Tracker • HTML5 o Video o Canvas o Web Workers 1. video canvas 2. 3.
  • QuakeⅡ GWT Port • HTML5 o WebGL o Video/Audio o WebSockets o LocalStorage
  • JAPANESE RESOURCES HTML5.jp HTML5 html5 Google API Expert ! HTML 5 API html5 API HTML5 html5
  • JAPANESE COMMUNITY HTML5-developers-jp HTML5 html5 developers HTML5 Japanese Interest Group HTML5 W3C html5 japanese
  • CONTACT mailto: shumpei.shiraishi at gmail.com twitter: @shumpei blog: http://d.hatena.ne.jp/Syunpei/ mixi: id=3989166