WHAT IS HTML5?
        SHUMPEI SHIRAISHI
HTML5-DEVELOPERS-JP/GOOGLE API EXPERT(HTML5)
WELCOME!
WHO IS THIS?
SHUMPEI SHIRAISHI
OPEN WEB TECHNOLOGY

  HTML5
MY ACTIVITY FOR HTML5
GOOGLE API EXPERT(HTML5)
    HTML5-DEVELOPERS-JP
    SOME ARTICLES

             @

             @            11

    HTML...
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/We...
“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

...
SEMANTICS, ACCESSIBILITY
<div class=”header”>
 <h1>Site Title</h1>
 <div class=”site-nav”>
  <ul><li>Home</li><li>Profile</...
SEMANTICS, ACCESSIBILITY
<header>
 <h1>Site Title</h1>
 <nav>
  <ul><li>Home</li><li>Profile</li><li>Settings</li></ul>
 </...
“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
 ...
HTML5
        HTML5   HTML4



        HTML5
HTML5
EXAMPLE OF
             COMPATIBILITY
<progress>

 <progress value=75 max=100>
              ...[75 / 100]</progress>




...
“This specification evolves HTML and
its related APIs to ease the authoring of
Web-based applications.”

    HTML5 Draft St...
HTML5 & API
• 2D & 3D

•

•           Web

•

•

•

•

• OS
HTML5 & API
• 2D & 3D
    o   HTML5 <canvas> element and API, SVG
•
    o   HTML5 <video>/<audio> element and API
•       ...
2D & 3D

HTML5 <canvas> element and API,SVG
HTML5 <canvas> element and API

•                  <canvas>


    var canvas = document.getElementsById("c1");
    var con...
SVG

SVG Scalable Vector Graphics    XML
                                      SVG
                          W3C
         ...
SVG
• IE9                   SVG HTML     SVG


 <!DOCTYPE html>
 <html>
  <svg>
   <path
     d="M 20 20 L 60 20 L 40 60 z...
HTML5 <video>/<audio> element and API
HTML5 <video>/<audio> element and API


• <video>                      <audio>
• src               <source>               ...
Web

HTML5 <html manifest=attribute> and ApplicationCache
Web

•              Web
• HTML/CSS/JavaScript/   Web
Web

•
                                   html   manifest

                                              hello.manifest
  ...
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.    ...
Movement Tracker

•                HTML5
     o Video
     o Canvas
     o Web Workers
1.                       video
    ...
QuakeⅡ GWT Port

•               HTML5
    o WebGL
    o Video/Audio
    o WebSockets
    o LocalStorage
JAPANESE RESOURCES

HTML5.jp
HTML5                       html5

                        Google API Expert

         ! HTML...
JAPANESE COMMUNITY

HTML5-developers-jp
HTML5
html5 developers


HTML5 Japanese Interest Group
HTML5
W3C                ht...
CONTACT

 mailto: shumpei.shiraishi at gmail.com

 twitter: @shumpei

 blog: http://d.hatena.ne.jp/Syunpei/

 mixi: id=398...
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
Upcoming SlideShare
Loading in...5
×

WHAT IS HTML5? (at CSS Nite Osaka)

3,208

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,208
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
127
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide



































  • &amp;#x3053;&amp;#x3046;&amp;#x3044;&amp;#x3046;&amp;#x65B9;&amp;#x5411;&amp;#x6027;&amp;#x306B;&amp;#x3088;&amp;#x308A;&amp;#x3001;&amp;#x65E2;&amp;#x5B58;&amp;#x30D9;&amp;#x30F3;&amp;#x30C0;&amp;#x306E;&amp;#x5B9F;&amp;#x88C5;&amp;#x52AA;&amp;#x529B;&amp;#x3092;&amp;#x7121;&amp;#x70BA;&amp;#x306B;&amp;#x305B;&amp;#x305A;&amp;#x3001;&amp;#x305D;&amp;#x308C;&amp;#x3089;&amp;#x306E;API&amp;#x306B;&amp;#x4F9D;&amp;#x5B58;&amp;#x3057;&amp;#x305F;&amp;#x30D7;&amp;#x30ED;&amp;#x30B0;&amp;#x30E9;&amp;#x30E0;&amp;#x306B;&amp;#x300C;&amp;#x6A19;&amp;#x6E96;&amp;#x300D;&amp;#x306E;&amp;#x304A;&amp;#x58A8;&amp;#x4ED8;&amp;#x304D;&amp;#x3092;&amp;#x4E0E;&amp;#x3048;&amp;#x3089;&amp;#x308C;&amp;#x308B;


  • Backward Compatibility&amp;#x306B;&amp;#x3064;&amp;#x3044;&amp;#x3066;&amp;#x306F;&amp;#x3001;&amp;#x975E;&amp;#x63A8;&amp;#x5968;&amp;#x306E;&amp;#x8981;&amp;#x7D20;&amp;#x3082;&amp;#x30D6;&amp;#x30E9;&amp;#x30A6;&amp;#x30B6;&amp;#x304C;&amp;#x30B5;&amp;#x30DD;&amp;#x30FC;&amp;#x30C8;&amp;#x3059;&amp;#x3079;&amp;#x304D;&amp;#x3060;&amp;#x3057;&amp;#x3001;
  • progress&amp;#x8981;&amp;#x7D20;&amp;#x306F;textContent&amp;#x3082;&amp;#x30D1;&amp;#x30FC;&amp;#x30B9;&amp;#x3059;&amp;#x308B;&amp;#x3002;
    HTML4&amp;#x30D6;&amp;#x30E9;&amp;#x30A6;&amp;#x30B6;&amp;#x3067;&amp;#x898B;&amp;#x308B;&amp;#x3068;&amp;#x3001;&amp;#x8981;&amp;#x7D20;&amp;#x306E;&amp;#x5185;&amp;#x5074;&amp;#x306E;&amp;#x307F;&amp;#x304C;&amp;#x8868;&amp;#x793A;&amp;#x3055;&amp;#x308C;&amp;#x308B;&amp;#x3002;











































  • Transcript of "WHAT IS HTML5? (at CSS Nite Osaka)"

    1. 1. WHAT IS HTML5? SHUMPEI SHIRAISHI HTML5-DEVELOPERS-JP/GOOGLE API EXPERT(HTML5)
    2. 2. WELCOME!
    3. 3. WHO IS THIS?
    4. 4. SHUMPEI SHIRAISHI
    5. 5. OPEN WEB TECHNOLOGY HTML5
    6. 6. MY ACTIVITY FOR HTML5
    7. 7. GOOGLE API EXPERT(HTML5) HTML5-DEVELOPERS-JP SOME ARTICLES @ @ 11 HTML5 @ HP ...
    8. 8. HTML5&API 2940 BP
    9. 9. HTML5 HTML
    10. 10. HTML5 HTML
    11. 11. HTML5 API ( )
    12. 12. HTML5 IS API
    13. 13. HTML5 IS API DOM “DOM5 HTML” HTML/XHTML JavaScript API
    14. 14. HTML5 IS API HTML/XHTML
    15. 15. “HTML5” IS AMBIGUOUS WORD “HTML5” API API API Web Workers/Web SQL Database/Web Storage/etc/etc/etc....
    16. 16. “HTML5” IS AMBIGUOUS WORD “Open Web Platform” HTML+CSS+JavaScript (+SVG) “ HTML5”
    17. 17. HTML5 IS VERY, VERY, VERY BIG
    18. 18. HTML5 ( HTML5 )
    19. 19. HTML5 IS VERY, VERY, VERY BIG
    20. 20. HTML5 IS VERY, VERY, VERY BIG
    21. 21. HTML5
    22. 22. SEMANTICS, ACCESSIBILITY PAVE THE COWPATHS HTML5 RICH INTERNET APPLICATIONS
    23. 23. ARE YOU READY?
    24. 24. HTML5 & ” PAVE THE COWPATHS”
    25. 25. ,
    26. 26. SEMANTICS, ACCESSIBILITY More Readable for Everyone
    27. 27. SEMANTICS, ACCESSIBILITY More Readable for Everyone
    28. 28. SEMANTICS, ACCESSIBILITY (section/article/nav/aside/...) (header/footer/time/command...) hidden (strong/small/b/i/address/menu...)
    29. 29. 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>
    30. 30. 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>
    31. 31. “PAVE THE COWPATH”
    32. 32. Image by Noel Sarah Dietrich via Flickr
    33. 33. EXAMPLES OF “PAVE THE COWPATH” HTML contentEditable/designMode/document.execCommand() innerHTML Drag & Drop API ...
    34. 34. EXAMPLES OF “PAVE THE COWPATH” API IE6 Safari Firefox - Ian Hickson(HTML5 hito
    35. 35. HTML5 HTML5 HTML4 HTML5 HTML5
    36. 36. EXAMPLE OF COMPATIBILITY <progress> <progress value=75 max=100> ...[75 / 100]</progress> ...[75 / 100]
    37. 37. “This specification evolves HTML and its related APIs to ease the authoring of Web-based applications.” HTML5 Draft Standard - 13 Nov 2009 (Ian Hickson)
    38. 38. HTML5 & API • 2D & 3D • • Web • • • • • OS
    39. 39. 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
    40. 40. 2D & 3D HTML5 <canvas> element and API,SVG
    41. 41. 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"
    42. 42. SVG SVG Scalable Vector Graphics XML SVG W3C Wikipedia • IE9 SVG HTML SVG
    43. 43. 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>
    44. 44. HTML5 <video>/<audio> element and API
    45. 45. 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
    46. 46. Web HTML5 <html manifest=attribute> and ApplicationCache
    47. 47. Web • Web • HTML/CSS/JavaScript/ Web
    48. 48. Web • html manifest hello.manifest CACHE MANIFEST hello.html hello.js hello.html <!DOCTYPE html> <html manifest="hello.manifest"> ... </html>
    49. 49. HTML5 Cross Document Messaging, XHR Level2
    50. 50. IE9 Ready! • iframe • onmessage postMessage()
    51. 51. XMLHttpRequest Level2 IE9 Ready! • IE8 o • form
    52. 52. Web Storage, Web SQL Database, Indexed Database API
    53. 53. Web Storage IE9 Ready! • o o • JavaScript •
    54. 54. Web SQL Database • • • Safari Chrome
    55. 55. Indexed Database API • • Web Storage o •
    56. 56. Web Workers
    57. 57. Web Workers • JavaScript API • JavaScript
    58. 58. Server-Sent Events, Web Sockets
    59. 59. Server-Sent Events • Comet o API o • DOM •
    60. 60. Web Sockets • o API W3C o IETF • • (^^;
    61. 61. OS File API, Drag & Drop API
    62. 62. File API • JavaScript API • •
    63. 63. 100%
    64. 64. HTML5
    65. 65. canvas IE XDM Video/Audio IE Web SQL Database Safari, Chrome Web Workers IE, Opera ...
    66. 66. HTTP://A.DEVERIA.COM/CANIUSE/
    67. 67. HTML5
    68. 68. Blowing apart fragments of Video • HTML5 o Video o Canvas 1.video canvas 2 2. video canvas 3. canvas
    69. 69. Movement Tracker • HTML5 o Video o Canvas o Web Workers 1. video canvas 2. 3.
    70. 70. QuakeⅡ GWT Port • HTML5 o WebGL o Video/Audio o WebSockets o LocalStorage
    71. 71. JAPANESE RESOURCES HTML5.jp HTML5 html5 Google API Expert ! HTML 5 API html5 API HTML5 html5
    72. 72. JAPANESE COMMUNITY HTML5-developers-jp HTML5 html5 developers HTML5 Japanese Interest Group HTML5 W3C html5 japanese
    73. 73. CONTACT mailto: shumpei.shiraishi at gmail.com twitter: @shumpei blog: http://d.hatena.ne.jp/Syunpei/ mixi: id=3989166
    1. A particular slide catching your eye?

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

    ×