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

  • 2,228 views
Uploaded on

Mozilla 勉強会@名古屋 …

Mozilla 勉強会@名古屋

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,228
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Attractive HTML5 @shoito / HTML5-FIT Mozilla @ 2010/10/16(Sat)
  • 2. / shoito
  • 3. → [4Y]
  • 4. astah/JUDE
  • 5. Flash/Web
  • 6. C/S RIA 1990 2003 Web 1990 / 1980 HTML5
  • 7. • HTML5 API • API • HTML5 •
  • 8. HTML5 API
  • 9. Indexed Database Web workers API Web Storage Geolocation API HTML5 WebSocket File API Web SQL Database ...etc HTML5 API
  • 10. W3C http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html Open Web Platform
  • 11. HTML, CSS, JavaScript
  • 12. HTML, CSS, JavaScript
  • 13. <!doctype html>
  • 14. <meta charset=“utf-8”>
  • 15. <script src=“jquery.min.js”></script>
  • 16. <link rel=“stylesheet” href=“main.css” />
  • 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. <?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. <!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. <footer> <header> <canvas> <nav> Application Cache <video> <section> <article> <audio> <aside> ...etc <command>
  • 21. <big> <frameset> <applet> <noframes> <font> <center> <frame> <dir> ...etc <tt> <u> <basefont>
  • 22. <header> <section> <header> <nav> <aside> <article> <footer> <footer>
  • 23. XHTML/HTML5
  • 24. HTML5 HTML4
  • 25. <input>
  • 26. <canvas>
  • 27. <video>
  • 28. <audio>
  • 29. data-xxx
  • 30. <ul> <li data-country=”JP”> </li> <li data-country=”US”> </li> .... </ul>
  • 31. Microdata item, itemprop
  • 32. <div item> <p>My name is <span itemprop='name'>shoito</span></p> <p>I am <span itemprop='nationality'>JP</span></p> </div>
  • 33. Device Orientation
  • 34. Application Cache Offline Application
  • 35. Application Cache • <!DOCTYPE html> <html manifest=”hello.manifest”> CACHE MANIFEST hello.html hello.js NETWORK: server.cgi
  • 36. Web Storage API localStorage, sessionStorage KEY : VALUE KEY : VALUE KEY : VALUE
  • 37. Session Storage • • sessionStorage.setItem(“key”, “value”); sessionStorage.removeItem(“key”); sessionStorage.clear();
  • 38. Local Storage • • • localStorage.setItem(“key”, “value”); localStorage.removeItem(“key”); localStorage.clear();
  • 39. Geolocation API
  • 40. Geolocation API • • IP GPS function callback(position) { lat = position.coords.latitude; .... } navigator.geolocation.getCurrentPosition(callback);
  • 41. Web Workers API
  • 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. File API API
  • 44. WebSocket API
  • 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. + WebSocket API
  • 47. W3C http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html Open Web Platform
  • 48. Flash HTML5 …
  • 49. HTML5
  • 50. When can I use...
  • 51. Firefox 4 Beta Technology
  • 52. THE HTML5 TEST
  • 53. Modernizr
  • 54. • Web • • Web • • •
  • 55. @shoito / Mozilla @ 2010/10/16(Sat)
  • 56. HTML5 Flash API as3webstorage as3geolocation Mozilla @ 2010/10/16(Sat)
  • 57. as3webstorage ActionScript3 Web Storage
  • 58. Flash Flash HTML SharedObject 100KB ( ) Web Storage 5MB :
  • 59. ActionScript <-> JavaScript ExternalInterface
  • 60. flash.external.ExternalInterface ActionScript function hoge( ):void (Flash) ExternalInterface ExternalInterface .call(funcJ); .addCallback(“funcA”, hoge); function funcJ( ) { } funcA(); JavaScript (HTML)
  • 61. as3geolocation ActionScript3 Geolocation
  • 62. Web SQL Database Flash + HTML 5: Offline Flash Apps using DataStore API
  • 63. • Flex ActionScript <-> JavaScript • ExternalInterface AS <-> JS XML • AS <-> JS