html5概要 & デモ
DESCRIPTION
Technology & Entrepreneurship TOKUSHIMA主催の「どんな分野の技術者でも知っておきたい Web最新事情とその実践」の用いたスライド資料です。TRANSCRIPT
- 1. HTML5 & 2013/10/27 Technology & Entrepreneurship TOKUSHIMA Toru Yoshikawa (@yoshikawa_t)
- 2. Who? / Toru Yoshikawa @yoshikawa_t html5jHTML5 Google Developer Experts (Chrome) HTML5 Experts.jp No.3 ()Web ()jQuery Mobile ()Sublime Text 2 Japan Users Group () Blog: http://d.hatena.ne.jp/pikotea/
- 3. HTML5
- 4. HTML5 1999 HTML4.01 10 WHATWG Web Applications 1.0 Web Forms 2.0 W3C 2014
- 5. HTML5 Web Web
- 6. HTML5
- 7. HTML5Web Web HTML Flash
- 8. HTML5Web HTML5 CSS3 JavaScript Flash Web
- 9.
- 10. HTML5 Semantics Offline & Storage Multimedia 3D, Graphics & Effects Connectivity Device Access Performance & Integration Styling (CSS3)
- 11. Semantics Offline & Storage Multimedia 3D, Graphics & Effects Connectivity Device Access Performance & Integration Styling (CSS3)
- 12. Oine & Storage Application Cache Web Storage Indexed Database KVS File APIs File System API online/oine events /
- 13. Oine & Storage Demo HTML5 Terminal online/oine events
- 14. HTML5 Terminal http://www.htmlvewow.com/demos/terminal/terminal.html
- 15. online/oine events http://html5-demos.appspot.com/static/navigator.onLine.html
- 16. Multimedia video/audio / WebVTT Web Audio API HTML Media Capture
- 17. Multimedia Demo Blowing apart fragments of video Using WebSRT to create video captions HTML5 Wow Visualizer
- 18. Blowing apart fragments of video http://craftymind.com/factory/html5video/CanvasVideo.html
- 19. HTML5 Wow Visualizer http://www.htmlvewow.com/demos/audio-visualizer/index.html
- 20. Graphics, 3D & Eects Canvas 2D WebGL 3D SVG
- 21. Graphics, 3D & Eects Demo Hello Racer BananaBread MapsGL
- 22. Hello Racer http://helloracer.com/webgl/
- 23. EVE online http://www.eveonline.com/universe/spaceships/curse/
- 24. Google MapsGL https://maps.google.com/
- 25. Realtime / Connectivity WebSocket Server-Sent Events /Comet Web Messaging Web XMLHttpRequest Level2 Notications WebRTC /
- 26. Realtime / Connectivity Demo Browser Quest Webcam Toy
- 27. Browser Quest http://browserquest.mozilla.org/
- 28. Webcam Toy http://webcamtoy.com/ja/
- 29. Device Access Geolocation API GPS Web Speech API Device Orientation Contacts API Calendar API Battery Status API Network Information API USB, Bluetooth
- 30. Device Access Demo Ball Pool Google Gravity Web Speech API Demonstration
- 31. Google Gravity http://mrdoob.com/projects/chromeexperiments/google-gravity/
- 32. Web Speech API https://www.google.com/intl/ja/chrome/demos/speech.html
- 33. Styling (CSS3) CSS3 Selectors :rst-child/:nth-child(odd) border-radius text-shadow/box-shadow gradient Webfonts Transforms Transitions/Animations CSS
- 34. CSS3 / Styling Demo Button Maker Round corners - HTML5Rokcs CSS3 Patterns Gallery CSS Clock
- 35. Rounded corners http://slides.html5rocks.com/#rounded-corners
- 36. Button Maker http://css-tricks.com/examples/ButtonMaker/
- 37. CSS Pattern Gallery http://lea.verou.me/css3patterns/
- 38.
- 39.
- 40. Can I use http://caniuse.com/
- 41.
- 42. Thank you!! ( @yoshikawa_t )