Concentrated HTML5 & Attractive HTML5

  • View
    3.195

  • Download
    2

Embed Size (px)

DESCRIPTION

HTML5Attractive HTML5

Transcript

  • 1. HTML5 Attractive HTML5 API@shoito HTML5-FIT

2. /shoito 3. [3.5y] 4. 5. Flex(Flash) [3y] 6. 7. HTML5 8. IT C/SRIA1990 2003 Web1990 / 1980 RIA Essential 2007 p005 9. HTML5 10. Hokuriku.lang - HTML52009/10 11. HTML5 Tech Talk in 2009/10 12. HTML5 2010/03/12 13. WCAF Seminar Vol.3 - HTML52010/03/20 14. Chrome Extensions with HTML5 2010/04/12 15. Google Hackathon for Chrome Extension2010/04/17, 24 16. 17. 9elements.com 18. Sketchpad 19. HTML5 presentation 20. Mozilla Bespin 21. HTML5 QUEST 22. chrome://newtab 23. Web 24. HTML5 HTML5 HTML5 25. HTML5 HTML5, / API HTML5 26. HTMLVer. 4 27. WHATWG W3CWeb Applications 1.0HTML5 HTML5 Microdata HTML5 Microdata canvas 2D Context HTML5 2D ContextCross-document messaging HTML5 CommunicationsChannel messaging deviceHTML DeviceWeb workersWeb workersWeb storageWeb storage Server-sent eventsServer-sent eventsWeb socketsWeb sockets 28. HTML IndexedWeb workers Database APIWeb Storage Geolocation APIHTML5WebSocketFile API Web SQL...etc Database 29. API HTML5 30. HTML5 31. HTML5 32. Web HTML5 33. Web - JavaScript CSSHTMLAPI 34. Web - JavaScript CSSHTMLAPI 35. Web - JavaScript CSSHTMLAPI 36. section, article header, footer aside, nav, ... canvas, video, audio ...etc 37. applet big font frame strike/s tt ...etc 38. ...etc 39. ...etcinputlist ...etc 40. HTML4HTML5 html5 -html5doctor- -HTML5.JP 41. Non-JavaScript email url number range demo 42. canvas 43. canvascanvas canvasJavaScript 44. video 45. video W3C / Firefoxogg/theora Operaogg/theora SafariH.264Google Chrome ogg/theora, H.264 46. videosrc demo 47. data-

  • ....

48. XHTML1HTML5 49. //W3C/DTDXHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd > DOCTYPE 50. XHTML / HTML5 51. JavaScript API 52. Web - JavaScript CSSHTMLAPI 53. API Application Cache API Communication API Geolocation API Web Storage Web SQL Database Web Workers Web Socket File API ...etc 54. Application Cache 55. API CACHE MANIFEST hello.html hello.js NETWORK: server.cgi 56. Communication API 57. Cross Document Messaging APIwindow.addEventListener( message , function() {...}, false); postMessage( hogehoge , http://example.com/ ); 58. Geolocation API 59. API function showMap(position) { .... } navigator.geolocation.getCurrentPosition(showMap);Firefox 3.5Google Location Servicedemo 60. Web Storage KEY : VALUEKEY : VALUEKEY : VALUE 61. sessionStorage.myKey = myValue; sessionStorage.setItem( yourKey , yourValue ); sessionStorage.clear(); 62. (++) localStorage.myKey = myValue; localStorage.removeItem( myKey ); localStorage.clear(); 63. Web Workers 64. JavaScriptAPI () JavaScript DOM DOMUI 65. File API 66. API(DnD, ) demo 67. Attractive HTML5 HTML5 68. HTML5 69. 70. HTML, CSS, JavaScript 71. HTML, CSS, JavaScript 72. 1 3 JavaScript CSS HTML API 13HTML, CSS, JavaScript 73. Browser is a PlatformWeb 74. No Plug-inFlash player, Silverlight plug-in, JavaFX runtime 75. Cross-PlatformWindows, Mac OS X, Linux, Chrome OS 76. Multi-devicePC, Mac, Mobile, ..... 77. 78. - FlashiPhone OSFlash Player 79. iAdiPhone/iPad HTML5 80. Andoide Mobile AP-PFHTML5 81. Server-Side lessDrag&DropFile APIWebWorker 82. Web/DesktopDrag&Drop/File API 83. Webheader, nav, section, article, footer, aside 84. HTML5 is Simple!doctype, meta, script, link ... 85. HTML4/XHTMLHTML5 - /() 86. N ew Web 87. // 88. 89. 1 3 JavaScript CSS HTML API 13HTML, CSS, JavaScript 90. HTML5 91. HTML5 92. When can I use... 93. HTML5 Demos and Examples 94. Modernizr 95. FlashFlashFlash PlayerFlash CS 96. HTML5Flash ExternalInterfaceJavaScript ActionScript 97. HTML5 / Flash HTML5 Flash () (Adobe) ()(Flash Player) PC(IE) (100%) (HTML, JavaScript) (ActionScript) 98. HTML5 99. HTML5, 100. , 101. iPhone/Android IE 102. HTML5/ 103. Web 104. Web 105. 106. Web 107. Chrome Extensions 108. Thanks!shoitosho.ito@air-life.nethttp://twitter.com/shoitoHTML5-FIT