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

1,850 views

Published on

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

No Downloads
Views
Total views
1,850
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
13
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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/

×