Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー

2,124 views

Published on

Published in: Technology, Sports
  • Be the first to comment

Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー

  1. 1. 株式会社ニューフォリア 最高技術責任者有限会社 f utomi 代表取締役羽田野 太巳(はたの ふとみ) @futomi futomi.hatanohttp://www.html5.jp/
  2. 2. <ruby> 羽田野<rp>(</rp><rt>はたの</rt><rp>)</rp> 太巳<rp>(</rp><rt>ふとみ</rt><rp>)</rp></ruby> マークアップ解説本 API解説本 APIチュートリアル本
  3. 3. ウェブとは
  4. 4. ≠ウェブ
  5. 5. あらゆる対象に 同じUXを提供する
  6. 6. あらゆる対象に 同じUXを提供する 確実に情報を伝える
  7. 7. 開発アプローチ 写真: http://www.flickr.com/photos/15216811@N06/5254696771/
  8. 8. 図: http://www.flickr.com/photos/horiavarlan/4273913228/
  9. 9. 写真: http://clubt.jp/product/106622_4679549.html
  10. 10. 高 Regressive EnhancementUXのレベル低 低 UAの機能実装度 高
  11. 11. Regressive Enhancement
  12. 12. http://html5please.com/
  13. 13. <meter value="20" min="0" low="30" high="70" max="100" optimum="100"></meter><script src="jquery.min.js"></script><script src="jquery.html5jpMeterPolyfill.js"></script><script>$(document).ready(function() { $(meter).html5jpMeterPolyfill();});</script> http://www.html5.jp/library/meter.html
  14. 14. http://raphaeljs.com/
  15. 15. Graceful Degradation 図: http://www.flickr.com/photos/melkorcete/180238980/
  16. 16. 新しいUA 古いUAJS/ONJS/OFF
  17. 17. Progressive Enhancement 図: http://www.flickr.com/photos/melkorcete/180238980/
  18. 18. 図: http://www.31ice.co.jp/contents/product/sundae/su046.html/
  19. 19. 新しいUA 古いUAJS/ONJS/OFF
  20. 20. HTMLのみで必要最小限を CSSでビジュアルを追加 JSで操作性を追加
  21. 21. Multi-device/Multi-screen
  22. 22. Desktop 13% Notebooks 23% Smart phones 54% Pads Netbooks 7% 3%http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011
  23. 23. Microsoft Surfacehttp://www.microsoft.com/surface/en/us/default.aspx
  24. 24. too Big...SHARP BIG PADhttp://www.sharp.co.jp/bigpad/ 写真: http://itpro.nikkeibp.co.jp/article/NEWS/20120424/393163/ /
  25. 25. extremely big... (digital Signage) ビデオ: http://youtu.be/Io5ylFD9saA
  26. 26. まとめ
  27. 27. Internet Explorer 9”We love HTML5 so match.” ビデオ: http://channel9.msdn.com/Events/MIX/MIX10/KEY02
  28. 28. Internet Explorer 10”Native HTML5 support” ビデオ: http://channel9.msdn.com/Events/MIX/MIX11/KEY01 写真: http://blogs.msdn.com/b/iefrance/archive/2011/04/12/internet-explorer-10-platform-preview-1-pr-233-sent-233-224-mix-2011.aspx
  29. 29. 株式会社ニューフォリア 最高技術責任者有限会社 f utomi 代表取締役羽田野 太巳(はたの ふとみ) @futomi futomi.hatanohttp://www.html5.jp/

×