いま使われているHTML5と、これからのHTML5

1,035 views

Published on

いま使われているHTML5と、これからのHTML5
@GrapeCityセミナー 2013/10/25
ひらい さだあき http://bit.ly/html5gc

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,035
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

いま使われているHTML5と、これからのHTML5

  1. 1. HTML5 HTML5 @GrapeCity 2013/10/25 @sada_h http://bit.ly/html5gc
  2. 2. Questions SIer? SE? Manager? Programmer? Java? .NET? HTML5 ? ? ?
  3. 3. I live in Kamakura. Born in 1981. html5j / HTML5 Ruby / Rails / HTML5 / JavaScript / Java SIer, System Engineer 2004/04 Kakaku.com, Inc. Engineer 2012/08 cena( ) powered by
  4. 4. Attention HTML5 HTML5 HTML5 canvas canvas HTML5 API
  5. 5. Demos This Slide. reveal.js This Slide with Gesture. Gestures + Reveal.JS - Chrome Experiments getUserMedia Sample Hello Fisher three.js webgl - city
  6. 6. Agenda 1. Web HTML 2. 3. 4. 5. HTML5 HTML5
  7. 7. History of HTML
  8. 8. History of HTML Year Spec 1993 HTML 1.0 1997 HTML 3.2 Topic IETF W3C W3C 1997 HTML 4.0 W3C 1999 HTML 4.0.1 W3C 2000 XHTML 1.0 W3C HTML 4.0.1 XML
  9. 9. History of HTML Year 2001 2007 2009 2011 2012 2013 Spec XHTML 1.1 HTML5 XHTML 2.0 HTML5 HTML5 HTML 5.1 Topic W3C W3C (WG ) XHTML2 WG W3C W3C (2012/12/17) W3C WD (2013/05/28)
  10. 10. W3C Working Draft, WD HTML 5.1 WD(2013/05/28) Last Call Working Draft Candidate Recommendation, CR HTML5 CR(2012/12/17) W3C Proposed Recommendation, PR W3C Recommendation, REC World Wide Web Consortium - Wikipedia W3C - Wikipedia
  11. 11. HTML5
  12. 12. Sites using HTML5 - Apple Apple
  13. 13. Sites using HTML5 - Apple HTML5 Markup Custom Data Attribute Role Attribute CSS3 Web Storage SVG data URL
  14. 14. Sites using HTML5 - Apple
  15. 15. Sites using HTML5 - Apple
  16. 16. Sites using HTML5 - Apple
  17. 17. Sites using HTML5 - Apple
  18. 18. Sites using HTML5 - Apple
  19. 19. Sites using HTML5 - Microsoft Microsoft Japan
  20. 20. Sites using HTML5 - Microsoft HTML5 Markup Custom Data Attribute Role Attribute CSS3 MediaQueries WebFonts
  21. 21. Sites using HTML5 - Microsoft
  22. 22. Sites using HTML5 - Microsoft
  23. 23. Sites using HTML5 - Microsoft
  24. 24. Sites using HTML5 - Microsoft
  25. 25. Sites using HTML5 - Tabelog
  26. 26. Sites using HTML5 - Tabelog Rich Snippets(RDFa/Microdata) Custom Data Attribute CSS3
  27. 27. Sites using HTML5 - Tabelog
  28. 28. Sites using HTML5 - Tabelog
  29. 29. Sites using HTML5 - Tabelog Google Structured Data Testing Tool
  30. 30. Twitter Bootstrap Bootstrap
  31. 31. Twitter Bootstrap Bootstrap Bootstrap3 Flat design. Responsive. No Support IE7, Firefox 3.6 IE8 Respond.js MediaQueries Bootstrap jQuery
  32. 32. Samples No Bootstrap Sample Bootstrap Sample
  33. 33. Twitter Bootstrap
  34. 34. Twitter Bootstrap normalize.css html5shiv respond.js (for IE8)
  35. 35. Twitter Bootstrap jQuery
  36. 36. jQuery jQuery
  37. 37. jQuery jQuery 1.9 2.x 1.8 1.x
  38. 38. jQuery 1.9 1.8 jQuery.browser() removed .live() .die() removed .attr() versus .prop() Migration Plugin jquery/jquery-migrate jQuery Core 1.9 Upgrade Guide | jQuery
  39. 39. jQuery 2.x 1.x jQuery 2.x No support Internet Explorer 6, 7, 8. API jquery1.9 Custom builds jQuery 1.x Support Internet Explorer 6, 7, 8. jQuery 2.0 Released | Official jQuery Blog
  40. 40. jQuery click, bind, live, delegate callback promise on
  41. 41. jQuery UI jQuery UI 1.10 over Removed support for IE6 jQuery UI 1.9 Upgrade Guide | jQuery UI jQuery UI 1.10 Upgrade Guide | jQuery UI
  42. 42. Graph and Graphics Highcharts Chart.js D3.js Raphaël
  43. 43. Highcharts Highcharts
  44. 44. Chart.js Chart.js
  45. 45. D3.js D3.js
  46. 46. Raphaël Raphaël
  47. 47. MVC, MVVM, MVW HTML5 … Backbone.js Knockout AngularJS TodoMVC Model, View, Controller or View Model or Whatever.
  48. 48. HTML5
  49. 49. HTML 5.1 ... HTML 5.1 ECMAScript Standard ECMA-262 ECMAScript 5 compatibility table ECMAScript compatibility table
  50. 50. HTML5 HTML5
  51. 51. Happy
  52. 52. Happy
  53. 53. HTML5 HTML5
  54. 54. HTML5 Thank you so mach. Enjoy HTML5! HTML5

×