1 / 27

現時点の本資料 は 完成版のスライド ではありません。

現時点の本資料 は 完成版のスライド ではありません。. D2-301. 開催当日までに内容に変更がありますので、印刷を 行われる方は後日更新される版をご利用になり、会場にお持ちください。会場には印刷資料はございません。. HTML5 でも安心！ Visual Studio での Web 開発. 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 物江 修 ( ものえおさむ ). D2-301. セッションの目的とゴール Session Objectives and Takeaways. セッションの目的

clove
Download Presentation

現時点の本資料 は 完成版のスライド ではありません。

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 現時点の本資料は 完成版のスライドではありません。 • D2-301 開催当日までに内容に変更がありますので、印刷を行われる方は後日更新される版をご利用になり、会場にお持ちください。会場には印刷資料はございません。

  2. HTML5 でも安心！Visual Studioでの Web 開発 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 物江 修 (ものえおさむ) D2-301

  3. セッションの目的とゴールSessionObjectives and Takeaways • セッションの目的 • HTML5 がアプリケーションにもたらす価値をご理解いただく • Visual Studio 2010、ASP.NET を使った HTML5 アプリケーションの作成方法の紹介 • セッションのゴール • ASP.NET アプリケーションに効果的に HTML5 の機能を組み込めるようになる • Visual Studio 2010 を使用してHTML5 コンテンツを効率よく記述できるようになる

  4. アジェンダ • HTML5 とは? • ASP.NET における HTML5 の利用 • Visual Studio 2010 の HTML5 サポート • Internet Explorer 9 : F12 開発者ツール

  5. HTML5 とは?

  6. HTML5 とは?～ 新しいバージョンの HTML です ～ • Same Markup, Same Code • アプリケーションのプラットフォーム • セマンティック

  7. 「HTML5」と呼ばれるもの キーワードとしての HTML5 CSS3 JavaScript API HTML5 SVG HTML5 (マークアップ) MathML WebGL Etc..

  8. ASP.NET における HTML5 の利用

  9. ASP.NET MVC3 Tools Update • セマンティック タグ • Modernizr JavaScriptライブラリ

  10. セマンティック タグ とは?～ ページ内の文に意味付けを行うもの ～ • ロジカルな文書構造 • マシン リーダブル • SEO 見出し 案内 時間 レコード(*) 記事

  11. Modernizr • 古い Web ブラウザー対応 • 本来は Web ブラウザーが HTML5/CSS3 のどの機能に対応しているかをチェック • modernizr.com で配布 • OSS JavaScript ライブラリ • MVC3Tools Update に含まれているのは v1.7 Modernizr-*.*.js

  12. MVC HTML5 Toolkit • HTML5 タグのヘルパー • CodePlexで配布 • NuGetからインストール • ｗeb.configに名前空間 の追加が必要 • Razor でも使用可 System.Web.Mvc.Html5.dll

  13. Demo ASP.NET MVC3 Tools Update MVC HTML5 Toolkit

  14. におけるHTML5 サポート

  15. HTML5 への対応状況 HTML5 Intellisense for Visual Studio 2010 and 2008 2010.June CSS3 Intellisense Schema 2011.February Service Pack1 2011.April 2011.June Web Standards Update for Microsoft Visual Studio 2010 SP1

  16. Web Standards Update for Microsoft Visual Studio 2010SP1 • ターゲット スキーマとインテリセンス • HTML5 タグ • ブラウザー API • CSS3 ＋

  17. Demo Web Standards Update for SP1

  18. F12 開発者ツール

  19. F12 開発者ツール • [F12] キーで起動 • Internet Explorer 9 標準搭載 • オンライン上のコンテンツも • 　デバッグ可能

  20. F12 開発者ツールの機能 エレメント情報 の表示 HTTP キャプチャ HTML、CSS　の編集 JavaScript の デバッグ 互換性のチェック

  21. Demo F12 開発者ツール ～ 基本機能紹介 ～

  22. セッションのまとめSession Wrap Up • ASP.NET は HTML5 を意識した機能追加が行われており、それを使用することで新しい時代に対応したアプリケーションを作成することができます。 • Visual Studio 2010 を使用すると、HTML5 を使用したコンテンツを効率よく記述することができます。

  23. 関連セッション D2-201：さらっと眺めてみよう! Web 関連テクノロジ "超" 概要 D2-202：Internet Explorer 9 と HTML5。そして、IE10

  24. リファレンス #1 Microsoft Visual Studio ホームページhttp://www.microsoft.com/japan/msdn/vstudio/ Visual Studio 2010 Service Pack 1 について (技術情報) http://www.microsoft.com/downloads/ja-jp/details.aspx?FamilyID=75568aa6-8107-475d-948a-ef22627e57a5&displayLang=ja Web Standards Update for Microsoft Visual Studio 2010 SP1 http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83 ASP.NET MVC3 Tools Update http://www.microsoft.com/downloads/ja-jp/details.aspx?FamilyID=82cbd599-d29a-43e3-b78b-0f863d22811a MVC HTML5 Toolkit http://mvchtml5.codeplex.com/

  25. リファレンス #2 Microsoft Web Platform http://www.microsoft.com/web Internet Explorer デベロッパー センター http://msdn.microsoft.com/ja-jp/ie/default.aspx monoe’s blog http://blogs.msdn.com/b/osamum/ Internet Explorer 9 ダウンロード http://www.microsoft.com/japan/virtualization/default.mspx

  26. ご清聴ありがとうございました • アンケート • にご協力 • ください • D2-301

More Related