有限会社 f u t o m i 代表取締役
羽田野 太巳(はたの ふとみ)
http://www.html5.jp/ @futomi futomi.hatano
株式会社ニューフォリア 最高技術責任者
<ruby> 羽田野<rp>(</rp><rt>はたの</rt><rp>)</rp> 太巳<rp>(</rp><rt>ふとみ</rt><rp>)</rp> </ruby>
マークアップ解説本 API解説本 APIチュートリアル本
ウェブとは
≠ウェブ
あらゆる対象に
同じUXを提供する
あらゆる対象に
確実に情報を伝える 同じUXを提供する
開発アプローチ
写真: http://www.flickr.com/photos/15216811@N06/5254696771/
図: http://www.flickr.com/photos/horiavarlan/4273913228/
写真: http://clubt.jp/product/106622_4679549.html
高 低 UAの機能実装度
低
高
Regressive Enhancement
UXのレベル
Regressive Enhancement
http://html5please.com/
<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
http://raphaeljs.com/
Graceful Degradation
図: http://www.flickr.com/photos/melkorcete/180238980/
新しいUA 古いUA
JS/ON
JS/OFF
図: http://www.flickr.com/photos/melkorcete/180238980/
Progressive Enhancement
図: http://www.31ice.co.jp/contents/product/sundae/su046.html/
新しいUA 古いUA
JS/ON
JS/OFF
HTMLのみで必要最小限を
CSSでビジュアルを追加
JSで操作性を追加
Multi-device/Multi-screen
Smart phones 54%
Pads 7% Netbooks
3%
Notebooks 23%
Desktop 13%
http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011
Microsoft Surface http://www.microsoft.com/surface/en/us/default.aspx
写真: http://itpro.nikkeibp.co.jp/article/NEWS/20120424/393163/ /
too Big...
SHARP BIG PAD http://www.sharp.co.jp/bigpad/
ビデオ: http://youtu.be/Io5ylFD9saA
extremely big... (digital Signage)
まとめ
Internet Explorer 9
ビデオ: http://channel9.msdn.com/Events/MIX/MIX10/KEY02
”We love HTML5 so match.”
ビデオ: 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
Internet Explorer 10
”Native HTML5 support”
有限会社 f u t o m i 代表取締役
羽田野 太巳(はたの ふとみ)
http://www.html5.jp/ @futomi futomi.hatano
株式会社ニューフォリア 最高技術責任者