Attractive HTML5
    @shoito /
       HTML5-FIT




                   Mozilla   @   2010/10/16(Sat)
/ shoito
→   [4Y]
astah/JUDE
Flash/Web
C/S           RIA
  1990         2003




                    Web
             1990
  /
      1980




HTML5
• HTML5   API

• API
• HTML5
•
HTML5   API
Indexed Database
         Web workers             API


         Web Storage       Geolocation API

HTML5
          WebSoc...
W3C




         http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html




Open Web Platform
HTML, CSS, JavaScript
HTML, CSS, JavaScript
<!doctype html>
<meta charset=“utf-8”>
<script src=“jquery.min.js”></script>
<link rel=“stylesheet” href=“main.css” />
<!DOCTYPE html PUBLIC “-//W3C/DTD HTML
4.01/EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”ja”>
  <head>
    <me...
<?xml version=”1.0” encoding=”utf-8”?>
<!DOCTYPE html PUBLIC “-//W3C/DTD XHTML 1.0 Strict//EN” “http://
www.w3.org/TR/xhtm...
<!doctype html>
<html lang=”ja”>
  <head>
    <meta charset=”utf-8”>
    <title>Mozilla             </title>
    <link rel...
<footer>
<header>                            <canvas>


           <nav>                             Application Cache
   ...
<big>                         <frameset>

                      <applet>               <noframes>
<font>
                 ...
<header>

         <section>
         <header>
<nav>                <aside>
         <article>

         <footer>


      ...
XHTML/HTML5
HTML5   HTML4
<input>
<canvas>
<video>
<audio>
data-xxx
<ul>
  <li data-country=”JP”>   </li>

  <li data-country=”US”>     </li>

  ....
</ul>
Microdata
 item, itemprop
<div item>
 <p>My name is
  <span itemprop='name'>shoito</span></p>
 <p>I am
  <span itemprop='nationality'>JP</span></p>
...
Device Orientation
Application Cache
    Offline Application
Application Cache
•
     <!DOCTYPE html>
     <html manifest=”hello.manifest”>


     CACHE MANIFEST
     hello.html
     ...
Web Storage API
 localStorage, sessionStorage



     KEY : VALUE
     KEY : VALUE
     KEY : VALUE
Session Storage


•
•
 sessionStorage.setItem(“key”, “value”);
 sessionStorage.removeItem(“key”);
 sessionStorage.clear();
Local Storage

•
•
•
 localStorage.setItem(“key”, “value”);
 localStorage.removeItem(“key”);
 localStorage.clear();
Geolocation API
Geolocation API
•
• IP                                   GPS


 function callback(position) {
     lat = position.coords.l...
Web Workers API
Web Workers API
•   JavaScript                                                    API

•                                  ...
File API
           API
WebSocket API
WebSocket API
•                                                          API

•   HTTP

    var ws = new WebSocket(“ws://a...
+
WebSocket API
W3C




         http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html




Open Web Platform
Flash HTML5   …
HTML5
When can I use...
Firefox 4 Beta Technology
THE HTML5 TEST
Modernizr
•   Web

•
•         Web

•
•
•
@shoito /




Mozilla   @      2010/10/16(Sat)
HTML5       Flash API

   as3webstorage as3geolocation




                     Mozilla   @   2010/10/16(Sat)
as3webstorage
ActionScript3   Web Storage
Flash


                                            Flash


HTML       SharedObject
           100KB      (   )
          ...
ActionScript <-> JavaScript
   ExternalInterface
flash.external.ExternalInterface

ActionScript                  function hoge( ):void
(Flash)
    ExternalInterface        ...
as3geolocation
ActionScript3   Geolocation
Web SQL Database


           Flash + HTML 5:
Offline Flash Apps using DataStore API
• Flex
    ActionScript <-> JavaScript

• ExternalInterface    AS <-> JS               XML




•                          ...
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Upcoming SlideShare
Loading in...5
×

Attractive HTML5~開発者の視点から~

2,380

Published on

Mozilla 勉強会@名古屋

日時: 2010年10月16日(土) 15:00〜18:00
テーマ: 次世代ブラウザと次世代 Web 技術

https://dev.mozilla.jp/events/workshop07/

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

No Downloads
Views
Total Views
2,380
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Attractive HTML5~開発者の視点から~

  1. 1. Attractive HTML5 @shoito / HTML5-FIT Mozilla @ 2010/10/16(Sat)
  2. 2. / shoito
  3. 3. → [4Y]
  4. 4. astah/JUDE
  5. 5. Flash/Web
  6. 6. C/S RIA 1990 2003 Web 1990 / 1980 HTML5
  7. 7. • HTML5 API • API • HTML5 •
  8. 8. HTML5 API
  9. 9. Indexed Database Web workers API Web Storage Geolocation API HTML5 WebSocket File API Web SQL Database ...etc HTML5 API
  10. 10. W3C http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html Open Web Platform
  11. 11. HTML, CSS, JavaScript
  12. 12. HTML, CSS, JavaScript
  13. 13. <!doctype html>
  14. 14. <meta charset=“utf-8”>
  15. 15. <script src=“jquery.min.js”></script>
  16. 16. <link rel=“stylesheet” href=“main.css” />
  17. 17. <!DOCTYPE html PUBLIC “-//W3C/DTD HTML 4.01/EN” “http://www.w3.org/TR/html4/strict.dtd”> <html lang=”ja”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <title>Mozilla </title> <link rel="stylesheet" href="main.css" type="text/css" /> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <p> </p> </body> </html>
  18. 18. <?xml version=”1.0” encoding=”utf-8”?> <!DOCTYPE html PUBLIC “-//W3C/DTD XHTML 1.0 Strict//EN” “http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3c.org/1999/xhtml” lang=”ja”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> <title>Mozilla </title> <link rel="stylesheet" href="main.css" type="text/css" /> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <p> </p> </body> </html>
  19. 19. <!doctype html> <html lang=”ja”> <head> <meta charset=”utf-8”> <title>Mozilla </title> <link rel="stylesheet" href="main.css" /> <script src="jquery.min.js"></script> </head> <body> <p> </p> </body> </html>
  20. 20. <footer> <header> <canvas> <nav> Application Cache <video> <section> <article> <audio> <aside> ...etc <command>
  21. 21. <big> <frameset> <applet> <noframes> <font> <center> <frame> <dir> ...etc <tt> <u> <basefont>
  22. 22. <header> <section> <header> <nav> <aside> <article> <footer> <footer>
  23. 23. XHTML/HTML5
  24. 24. HTML5 HTML4
  25. 25. <input>
  26. 26. <canvas>
  27. 27. <video>
  28. 28. <audio>
  29. 29. data-xxx
  30. 30. <ul> <li data-country=”JP”> </li> <li data-country=”US”> </li> .... </ul>
  31. 31. Microdata item, itemprop
  32. 32. <div item> <p>My name is <span itemprop='name'>shoito</span></p> <p>I am <span itemprop='nationality'>JP</span></p> </div>
  33. 33. Device Orientation
  34. 34. Application Cache Offline Application
  35. 35. Application Cache • <!DOCTYPE html> <html manifest=”hello.manifest”> CACHE MANIFEST hello.html hello.js NETWORK: server.cgi
  36. 36. Web Storage API localStorage, sessionStorage KEY : VALUE KEY : VALUE KEY : VALUE
  37. 37. Session Storage • • sessionStorage.setItem(“key”, “value”); sessionStorage.removeItem(“key”); sessionStorage.clear();
  38. 38. Local Storage • • • localStorage.setItem(“key”, “value”); localStorage.removeItem(“key”); localStorage.clear();
  39. 39. Geolocation API
  40. 40. Geolocation API • • IP GPS function callback(position) { lat = position.coords.latitude; .... } navigator.geolocation.getCurrentPosition(callback);
  41. 41. Web Workers API
  42. 42. Web Workers API • JavaScript API • DOM main.js var worker = new Worker(“calc.js”); worker.onmessage = function(event) { alert(event.data); }; worker.postMessage(100); calc.js onmessage = function(event) { var num = event.data.num; for (var i = 0; i < 10000; i++) { num = num + i; } postMessage(num); };
  43. 43. File API API
  44. 44. WebSocket API
  45. 45. WebSocket API • API • HTTP var ws = new WebSocket(“ws://air-life.net/service”); ws.onopen = function() { ws.send(“Hello shoito”); }; ws.onmessage = function(event) { alert(event.data); };
  46. 46. + WebSocket API
  47. 47. W3C http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html Open Web Platform
  48. 48. Flash HTML5 …
  49. 49. HTML5
  50. 50. When can I use...
  51. 51. Firefox 4 Beta Technology
  52. 52. THE HTML5 TEST
  53. 53. Modernizr
  54. 54. • Web • • Web • • •
  55. 55. @shoito / Mozilla @ 2010/10/16(Sat)
  56. 56. HTML5 Flash API as3webstorage as3geolocation Mozilla @ 2010/10/16(Sat)
  57. 57. as3webstorage ActionScript3 Web Storage
  58. 58. Flash Flash HTML SharedObject 100KB ( ) Web Storage 5MB :
  59. 59. ActionScript <-> JavaScript ExternalInterface
  60. 60. flash.external.ExternalInterface ActionScript function hoge( ):void (Flash) ExternalInterface ExternalInterface .call(funcJ); .addCallback(“funcA”, hoge); function funcJ( ) { } funcA(); JavaScript (HTML)
  61. 61. as3geolocation ActionScript3 Geolocation
  62. 62. Web SQL Database Flash + HTML 5: Offline Flash Apps using DataStore API
  63. 63. • Flex ActionScript <-> JavaScript • ExternalInterface AS <-> JS XML • AS <-> JS

×