HTML5
Web       API


                @
html5-developers-jp Google


                        Web


Google       API Expert HTML5

2007     Gears

          Gears
HTML5

  HTML5 - HTML      XHTML       API




Open Web Platform         API



Open Web       Web

                     ×...
HTML5                       (1)

                 HTML

                API

8/25

       10


         2022           w
HTML5                             (2)


                            Web
        API

  HTML5 - A vocabulary and associated...
HTML5 - A vocabulary and associated APIs for HTML and
XHTML


       HTML5



          HTML5




          Canvas



    ...
HTML5 - HTML5


            .html .htm

          Content-Type text/html


     DOCTYPE
<!DOCTYPE html>
<html>
 <body>
 .....
HTML5                     - HTML5




        article, aside, footer, header, hgroup, nav, section



        figure, sourc...
HTML5



   section   HTML
     CSS            section    div

   article
                              <atom:entry> aside...
body, td        HTML5




     h1-h6

     hgroup

header,footer
<!DOCTYPE html>
<html>
  <head><meta charset=”UTF-8”></head>
  <body>
    <header>
       <nav><li>a</li><li>b</li></nav>
...
<!DOCTYPE html>
<html>
  <head><meta charset=”UTF-8”></head>
  <body>
    <header>
       <nav><li>a</li><li>b</li></nav>
...
<!DOCTYPE html>
<html>
  <head><meta charset=”UTF-8”></head>
  <body>
    <header>
       <nav><li>a</li><li>b</li></nav>
...
<!DOCTYPE html>
<html>
  <head><meta charset=”UTF-8”></head>
  <body>
    <header>
       <nav><li>a</li><li>b</li></nav>
...
<!DOCTYPE html>
<html>
  <head><meta charset=”UTF-8”></head>
  <body>
    <header>
       <nav><li>a</li><li>b</li></nav>
...
-




    h1-h6



    h1-h6



    section/article/nav/aside
-


<body>
  <h1>body                          </h1>
 <p>           1       </p>
 <h2>h2                                 <...
Canvas




         Canvas
Canvas


    Canvas                      <canvas>

    Canvas                      canvas
    (canvas.getContext(“2d”))

<...
<video>

<audio>

<source>



<video><audio>


JavaScript



             Google On2 Technology
<video id=”video1” width=”300” src=”video.ogv”>

</video>

//      JavaScript
var video1 = document.getElementById(“video1...
WebForms2.0

                      input    type

    tel

    search

    url         URL

    email

    datetime, datet...
input   type

month

week

time

number

range

color

         Opera
required

pattern

type                             email, url

form      submit

form.checkValidity()



                ...
API




&   API

    draggable

    dragstart                                             DataTransfer



    dropover    ...
API


<div id=”dragSrc” draggable>        </div>
<div id=”dragDest”>        </div>

dragSrc.addEventListener(“dragStart”, ...
DOM            API

     Element.classList        className

     Document.getElementByClassName()

designMode execCommand...
Open Web Platform   API




   Web Workers

   Web Storage

   Web Database

   Web Sockets
Web




                                                  Content-Type: text/
cache-manifest

Web          html        man...
-




                 UTF-8

     1



CACHE MANIFEST

# version: 200909241054

hello.html
hello.js
document




           window.postMessage(message, targetOrigin)

           onmessage

    :
var iframe = ...
iframe.con...
Web Workers


                                                               UI

             : new Worker(scriptUrl)




...
Web Database


                                   SQL

          API         API

                API



             API
...
Web Storage




         LocalStorage

         SessionStorage


    localStorage.setItem(“key”, “value”);

    var val = ...
Web Sockets


      HTTP                          API



             80(ws), 443(wss)     HTTP/HTTPS

    new WebSocket(u...
HTML                             Web

HTML5     API



            Web

    Canvas SVG                   UI




    ...


...
Html5 For Jjugccc2009fall
Upcoming SlideShare
Loading in …5
×

Html5 For Jjugccc2009fall

4,473 views

Published on

JJUG CCCでのHTML5講演で使用したスライド

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,473
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Html5 For Jjugccc2009fall

    1. 1. HTML5 Web API @
    2. 2. html5-developers-jp Google Web Google API Expert HTML5 2007 Gears Gears
    3. 3. HTML5 HTML5 - HTML XHTML API Open Web Platform API Open Web Web ×4 and,
    4. 4. HTML5 (1) HTML API 8/25 10 2022 w
    5. 5. HTML5 (2) Web API HTML5 - A vocabulary and associated APIs for HTML and XHTML Web Storage, Web Database, Web Workers... Gears API
    6. 6. HTML5 - A vocabulary and associated APIs for HTML and XHTML HTML5 HTML5 Canvas API
    7. 7. HTML5 - HTML5 .html .htm Content-Type text/html DOCTYPE <!DOCTYPE html> <html> <body> ... </body> </html>
    8. 8. HTML5 - HTML5 article, aside, footer, header, hgroup, nav, section figure, source, video, audio, canvas, embed Web keygen, output, input type progress, meter, command, details mark, ruby, rt, rp, time
    9. 9. HTML5 section HTML CSS section div article <atom:entry> aside aside nav
    10. 10. body, td HTML5 h1-h6 hgroup header,footer
    11. 11. <!DOCTYPE html> <html> <head><meta charset=”UTF-8”></head> <body> <header> <nav><li>a</li><li>b</li></nav> </header> <section id=”main”> <h1> </h1> <article> <h1> </h1> </article> </section> <footer>Copyright(c)...</footer> </body> </html>
    12. 12. <!DOCTYPE html> <html> <head><meta charset=”UTF-8”></head> <body> <header> <nav><li>a</li><li>b</li></nav> </header> <section id=”main”> <h1> </h1> <article> <h1> </h1> </article> </section> <footer>Copyright(c)...</footer> </body> </html>
    13. 13. <!DOCTYPE html> <html> <head><meta charset=”UTF-8”></head> <body> <header> <nav><li>a</li><li>b</li></nav> </header> <section id=”main”> <h1> </h1> <article> <h1> </h1> </article> </section> <footer>Copyright(c)...</footer> </body> </html>
    14. 14. <!DOCTYPE html> <html> <head><meta charset=”UTF-8”></head> <body> <header> <nav><li>a</li><li>b</li></nav> </header> <section id=”main”> <h1> </h1> <article> <h1> </h1> </article> </section> <footer>Copyright(c)...</footer> </body> </html>
    15. 15. <!DOCTYPE html> <html> <head><meta charset=”UTF-8”></head> <body> <header> <nav><li>a</li><li>b</li></nav> </header> <section id=”main”> <h1> </h1> <article> <h1> </h1> </article> </section> <footer>Copyright(c)...</footer> </body> </html>
    16. 16. - h1-h6 h1-h6 section/article/nav/aside
    17. 17. - <body> <h1>body </h1> <p> 1 </p> <h2>h2 </h2> <p> 2 </p> </body> <body> <h1>body </h1> <p> 1 </p> <section> <h2>section </h2> <p> 2 </p> </section> </body>
    18. 18. Canvas Canvas
    19. 19. Canvas Canvas <canvas> Canvas canvas (canvas.getContext(“2d”)) <canvas id=”canvas1” width=”200” height=”100”> var canvas1 = document.getElementById(“canvas1”); var ctx = canvas1.getContext(“2d”); ctx.drawImage(image, 0, 0); ... 3d O3D (Google), Canvas3D (Mozilla), Opera 3D Web GL OpenGL ES2.0 JavaScript
    20. 20. <video> <audio> <source> <video><audio> JavaScript Google On2 Technology
    21. 21. <video id=”video1” width=”300” src=”video.ogv”> </video> // JavaScript var video1 = document.getElementById(“video1”); video1.play(); video1.stop(); video1.addEventListener( “onloadstart”, function(){}, false);
    22. 22. WebForms2.0 input type tel search url URL email datetime, datetime-local date ( )
    23. 23. input type month week time number range color Opera
    24. 24. required pattern type email, url form submit form.checkValidity() placeholder
    25. 25. API & API draggable dragstart DataTransfer dropover event.preventDefault() drop DataTransfer event.stopPropagation()
    26. 26. API <div id=”dragSrc” draggable> </div> <div id=”dragDest”> </div> dragSrc.addEventListener(“dragStart”, function(e) { var dt = e.dataTransfer; dt.setData(“text/plain”, “Hello”); return true; }); dragDest.addEventListener(“dragOver”, function(e) { e.preventDefault(); return false; }); dragDest.addEventListener(“drop”, function(e) { var text = e.dataTransfer.getData(“text/plain”); e.stopPropagation(); ... return false; });
    27. 27. DOM API Element.classList className Document.getElementByClassName() designMode execCommand() WYSIWYG Microdata role, aria-, contextmenu, hidden, data-*, contentEditable..... ... more and more
    28. 28. Open Web Platform API Web Workers Web Storage Web Database Web Sockets
    29. 29. Web Content-Type: text/ cache-manifest Web html manifest URL : <html manifest=”hello.manifest”> JavaScript
    30. 30. - UTF-8 1 CACHE MANIFEST # version: 200909241054 hello.html hello.js
    31. 31. document window.postMessage(message, targetOrigin) onmessage : var iframe = ... iframe.contentWindow.postMessage(“Hello”, “http://destdomain.com”); : onmessage = function(event) { if (event.origin == “http://srcdomain.com”) { var message = event.data; ... } }
    32. 32. Web Workers UI : new Worker(scriptUrl) : worker.postMessage(message); : worker.onmessage(event); postMessage onmessage SharedWorker ui.js worker.js worker.onmessage = onmessage = function(msg) { function(msg) { ... ... postMessage(...) } } function a { worker.postMessage(...)
    33. 33. Web Database SQL API API API API var db = openDatabase(...) db.transaction(function(tx) { tx.executeSql( “INSERT INTO Customer (NAME, AGE) “ + “VALUES(?,?)”, [“Shiraishi”, 31], function onSuccess(tx, rs) { ... ... }, function onError(tx, error) {
    34. 34. Web Storage LocalStorage SessionStorage localStorage.setItem(“key”, “value”); var val = localStorage.getItem(“key”); // localStorage.key =“value”; var val = localStorage.key;
    35. 35. Web Sockets HTTP API 80(ws), 443(wss) HTTP/HTTPS new WebSocket(url) postMessage() onmessage() var ws = new WebSocket(“ws://example.com”); ws.onmessage = function(message) { ... } ws.postMessage(“Hello”);
    36. 36. HTML Web HTML5 API Web Canvas SVG UI ... Let’s HTML5!

    ×