Attractive HTML5~開発者の視点から~
•
2 likes•1,347 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Attractive HTML5~開発者の視点から~
Similar to Attractive HTML5~開発者の視点から~ (20)
More from Sho Ito
More from Sho Ito (18)
Recently uploaded
Recently uploaded (20)
Attractive HTML5~開発者の視点から~
- 1. Attractive HTML5 @shoito / HTML5-FIT Mozilla @ 2010/10/16(Sat)
- 2. / shoito
- 3. → [4Y]
- 4. astah/JUDE
- 5. Flash/Web
- 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
- 14. <!doctype html>
- 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”?> <!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>
- 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. XHTML/HTML5
- 27. HTML5 HTML4
- 28. <input>
- 29. <canvas>
- 30. <video>
- 31. <audio>
- 32. data-xxx
- 33. <ul> <li data-country=”JP”> </li> <li data-country=”US”> </li> .... </ul>
- 35. <div item> <p>My name is <span itemprop='name'>shoito</span></p> <p>I am <span itemprop='nationality'>JP</span></p> </div>
- 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. Geolocation API
- 43. Geolocation API • • IP GPS function callback(position) { lat = position.coords.latitude; .... } navigator.geolocation.getCurrentPosition(callback);
- 44. Web Workers API
- 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. WebSocket API
- 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. + WebSocket API
- 50. W3C http://www.w3.org/2010/Talks/0117-next-web-plh/nextweb.html Open Web Platform
- 51. Flash HTML5 …
- 53. HTML5
- 54. When can I use...
- 55. Firefox 4 Beta Technology
- 56. THE HTML5 TEST
- 57. Modernizr
- 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