Web

      HTML5   SVG
HTML5
HTML5

• HTML   10
HTML5

• HTML    10

• Apple   Google
HTML5

• HTML 10
• Apple Google
• HTML5 Web
HTML5

• HTML 10
• Apple Google
• HTML5 Web

• XHTML          RSS/Atom Ajax
             Web XML
SVG
SVG
•   Scalable Vector Graphics W3C   2D
                       2001
SVG
•   Scalable Vector Graphics W3C   2D
                       2001

•           Adobe SVG
SVG
•   Scalable Vector Graphics W3C     2D
                       2001

•           Adobe SVG

•         Web
            ...
SVG
•   Scalable Vector Graphics W3C          2D
                       2001

•           Adobe SVG

•         Web
       ...
• HTML5
• HTML5
• HTML5   SVG   Web
• HTML5
• HTML5     SVG           Web



•                 2D/3D
    HTML5   SVG
HTML5   XML
HTML5          XML

• HTML5            HTML   XML
          XHTML
HTML5          XML

• HTML5            HTML   XML
          XHTML

• HTML      DOCTYPE
     SGML
HTML5          XML

• HTML5            HTML   XML
          XHTML

• HTML      DOCTYPE
     SGML

• XHTML      XHTML
HTML5          XML

• HTML5            HTML   XML
          XHTML

• HTML      DOCTYPE
     SGML

• XHTML      XHTML

•
Web Storage
Web Storage
• Web Storage   Web   2
Web Storage
• Web Storage   Web   2



•
      Storage
Web Storage
• Web Storage     Web        2



•
        Storage

• SQL                   Database
Web Storage
• Web Storage   Web        2



•
      Storage

• SQL                 Database

• Database
Web Socket
Web Socket
• Web Socket
Web Socket
• Web Socket

• Google Wave
Web Socket
• Web Socket

• Google Wave

•               Internet Draft
Web Socket
• Web Socket

• Google Wave

•               Internet Draft

• HTTP                  Web
Web Workers
Web Workers
•   Web Workers
Web Workers
•   Web Workers



•   JavaScript Worker
Web Workers
•    Web Workers



•    JavaScript Worker


//
var worker = new Worker('worker.js');
worker.onmessage = funct...
HTML   SVG
HTML         SVG
•   HTML   SVG
HTML          SVG
•   HTML    SVG



•   HTML5   Web
HTML             SVG
•   HTML    SVG



•   HTML5    Web



•   SVG 1.2 HTML5
           API
HTML             SVG
•   HTML    SVG



•   HTML5    Web



•   SVG 1.2 HTML5
           API

•   Chrome OS WebOS
• HTML5    SVG 1.2   audio
   video
• HTML5     SVG 1.2   audio
    video

•
• HTML5     SVG 1.2   audio
    video

•

• HTML5     SVG 1.2
• HTML5        SVG 1.2    audio
      video

•

• HTML5        SVG 1.2

• Theora       H.264     W3C Video
    Activity
2D
2D

• HTML5            2D
          canvas
2D

• HTML5             2D
           canvas

•
     SVG
2D

• HTML5                 2D
               canvas

•
      SVG

• Canvas API   HTML5          SVG
                     ...
3D
3D

• SVG   3D Transforms   3D
3D

• SVG   3D Transforms         3D



• HTML5      CSS Transforms
3D

• SVG   3D Transforms           3D



• HTML5        CSS Transforms



• Canvas API   3D
  WebGL Khronos Group
Widgets
Widgets
• Widgets   Mac OS X   Web
Widgets
• Widgets   Mac OS X        Web



•                      TV
Widgets
• Widgets   Mac OS X            Web



•                      TV

•           W3C Widgets     HTML5   SVG
Widgets
• Widgets   Mac OS X            Web



•                      TV

•           W3C Widgets     HTML5   SVG



•    ...
WebアプリプラットフォームとしてのHTML5とSVG
WebアプリプラットフォームとしてのHTML5とSVG
Upcoming SlideShare
Loading in …5
×

WebアプリプラットフォームとしてのHTML5とSVG

1,705 views

Published on

情報科学技術フォーラム(FIT2009)発表資料
2009年9月4日

Published in: Technology
  • Be the first to comment

WebアプリプラットフォームとしてのHTML5とSVG

  1. 1. Web HTML5 SVG
  2. 2. HTML5
  3. 3. HTML5 • HTML 10
  4. 4. HTML5 • HTML 10 • Apple Google
  5. 5. HTML5 • HTML 10 • Apple Google • HTML5 Web
  6. 6. HTML5 • HTML 10 • Apple Google • HTML5 Web • XHTML RSS/Atom Ajax Web XML
  7. 7. SVG
  8. 8. SVG • Scalable Vector Graphics W3C 2D 2001
  9. 9. SVG • Scalable Vector Graphics W3C 2D 2001 • Adobe SVG
  10. 10. SVG • Scalable Vector Graphics W3C 2D 2001 • Adobe SVG • Web Opera Safari Firefox
  11. 11. SVG • Scalable Vector Graphics W3C 2D 2001 • Adobe SVG • Web Opera Safari Firefox • 7 2008 12 SVG Tiny 1.2
  12. 12. • HTML5
  13. 13. • HTML5 • HTML5 SVG Web
  14. 14. • HTML5 • HTML5 SVG Web • 2D/3D HTML5 SVG
  15. 15. HTML5 XML
  16. 16. HTML5 XML • HTML5 HTML XML XHTML
  17. 17. HTML5 XML • HTML5 HTML XML XHTML • HTML DOCTYPE SGML
  18. 18. HTML5 XML • HTML5 HTML XML XHTML • HTML DOCTYPE SGML • XHTML XHTML
  19. 19. HTML5 XML • HTML5 HTML XML XHTML • HTML DOCTYPE SGML • XHTML XHTML •
  20. 20. Web Storage
  21. 21. Web Storage • Web Storage Web 2
  22. 22. Web Storage • Web Storage Web 2 • Storage
  23. 23. Web Storage • Web Storage Web 2 • Storage • SQL Database
  24. 24. Web Storage • Web Storage Web 2 • Storage • SQL Database • Database
  25. 25. Web Socket
  26. 26. Web Socket • Web Socket
  27. 27. Web Socket • Web Socket • Google Wave
  28. 28. Web Socket • Web Socket • Google Wave • Internet Draft
  29. 29. Web Socket • Web Socket • Google Wave • Internet Draft • HTTP Web
  30. 30. Web Workers
  31. 31. Web Workers • Web Workers
  32. 32. Web Workers • Web Workers • JavaScript Worker
  33. 33. Web Workers • Web Workers • JavaScript Worker // var worker = new Worker('worker.js'); worker.onmessage = function(event) { document.getElementById('data').textContent = event.data; }; // worker.js - postMessage(data);
  34. 34. HTML SVG
  35. 35. HTML SVG • HTML SVG
  36. 36. HTML SVG • HTML SVG • HTML5 Web
  37. 37. HTML SVG • HTML SVG • HTML5 Web • SVG 1.2 HTML5 API
  38. 38. HTML SVG • HTML SVG • HTML5 Web • SVG 1.2 HTML5 API • Chrome OS WebOS
  39. 39. • HTML5 SVG 1.2 audio video
  40. 40. • HTML5 SVG 1.2 audio video •
  41. 41. • HTML5 SVG 1.2 audio video • • HTML5 SVG 1.2
  42. 42. • HTML5 SVG 1.2 audio video • • HTML5 SVG 1.2 • Theora H.264 W3C Video Activity
  43. 43. 2D
  44. 44. 2D • HTML5 2D canvas
  45. 45. 2D • HTML5 2D canvas • SVG
  46. 46. 2D • HTML5 2D canvas • SVG • Canvas API HTML5 SVG API
  47. 47. 3D
  48. 48. 3D • SVG 3D Transforms 3D
  49. 49. 3D • SVG 3D Transforms 3D • HTML5 CSS Transforms
  50. 50. 3D • SVG 3D Transforms 3D • HTML5 CSS Transforms • Canvas API 3D WebGL Khronos Group
  51. 51. Widgets
  52. 52. Widgets • Widgets Mac OS X Web
  53. 53. Widgets • Widgets Mac OS X Web • TV
  54. 54. Widgets • Widgets Mac OS X Web • TV • W3C Widgets HTML5 SVG
  55. 55. Widgets • Widgets Mac OS X Web • TV • W3C Widgets HTML5 SVG • Web Widgets

×