![→ [4Y]](https://image.slidesharecdn.com/mozillaattractivehtml5-key-101020055854-phpapp02/85/Attractive-HTML5-3-320.jpg)
Uploaded bySho Ito
Attractive HTML5~開発者の視点から~
The document discusses HTML5 and its APIs. It provides an overview of several HTML5 APIs including the geolocation API, web storage API, web workers API, and WebSocket API. It also discusses how these new HTML5 features allow for more advanced web applications compared to older technologies like Flash. Finally, it mentions some libraries and tools for testing HTML5 browser support.
More Related Content
![[MindMap]Software Patterns](https://cdn.slidesharecdn.com/ss_thumbnails/software-patterns-mm-090915060830-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[MindMap] A recommendation of the design for developers](https://cdn.slidesharecdn.com/ss_thumbnails/recomm-of-design-for-dev-mm-090912114356-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Attractive HTML5~開発者の視点から~
- 1. Attractive HTML5 @shoito / HTML5-FIT Mozilla @ 2010/10/16(Sat)
- 2.
- 3. → [4Y]
- 4.
- 5.
- 7. C/S RIA 1990 2003 Web 1990 / 1980 HTML5
- 8. • HTML5 API • API • HTML5 •
- 9. HTML5 API
- 10. Indexed Database Web workers API Web Storage Geolocation API HTML5 WebSocket File API Web SQL Database ...etc HTML5 API
- 11. W3C http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html Open Web Platform
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. <!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>
- 19. <?xml version=”1.0” encoding=”utf-8”?> <!DOCTYPEhtml 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>
- 20. <!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>
- 21. <footer> <header> <canvas> <nav> Application Cache <video> <section> <article> <audio> <aside> ...etc <command>
- 22. <big> <frameset> <applet> <noframes> <font> <center> <frame> <dir> ...etc <tt> <u> <basefont>
- 23. <header> <section> <header> <nav> <aside> <article> <footer> <footer>
- 26.
- 27. HTML5 HTML4
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. <ul> <lidata-country=”JP”> </li> <li data-country=”US”> </li> .... </ul>
- 34.
- 35. <div item> <p>Myname is <span itemprop='name'>shoito</span></p> <p>I am <span itemprop='nationality'>JP</span></p> </div>
- 36.
- 37. Application Cache Offline Application
- 38. Application Cache • <!DOCTYPE html> <html manifest=”hello.manifest”> CACHE MANIFEST hello.html hello.js NETWORK: server.cgi
- 39. Web Storage API localStorage, sessionStorage KEY : VALUE KEY : VALUE KEY : VALUE
- 40. Session Storage • • sessionStorage.setItem(“key”,“value”); sessionStorage.removeItem(“key”); sessionStorage.clear();
- 41. Local Storage • • • localStorage.setItem(“key”,“value”); localStorage.removeItem(“key”); localStorage.clear();
- 42.
- 43. Geolocation API • • IP GPS function callback(position) { lat = position.coords.latitude; .... } navigator.geolocation.getCurrentPosition(callback);
- 44.
- 45. 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); };
- 46. File API API
- 47.
- 48. 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); };
- 49.
- 50. W3C http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html Open Web Platform
- 51.
- 53.
- 54. When can Iuse...
- 55. Firefox 4 BetaTechnology
- 56.
- 57.
- 59. • Web • • Web • • •
- 60. @shoito / Mozilla @ 2010/10/16(Sat)
- 62. HTML5 Flash API as3webstorage as3geolocation Mozilla @ 2010/10/16(Sat)
- 63. as3webstorage ActionScript3 Web Storage
- 64. Flash Flash HTML SharedObject 100KB ( ) Web Storage 5MB :
- 65. ActionScript <-> JavaScript ExternalInterface
- 66. flash.external.ExternalInterface ActionScript function hoge( ):void (Flash) ExternalInterface ExternalInterface .call(funcJ); .addCallback(“funcA”, hoge); function funcJ( ) { } funcA(); JavaScript (HTML)
- 67. as3geolocation ActionScript3 Geolocation
- 68. Web SQL Database Flash + HTML 5: Offline Flash Apps using DataStore API
- 69. • Flex ActionScript <-> JavaScript • ExternalInterface AS <-> JS XML • AS <-> JS