Creators'night#12今井
Seu SlideShare está sendo baixado.
×
![// MyService.svc - MyService.cs
[ServiceContract(Namespace = "MyServices")]
[AspNetCompatibilityRequirements(Requirement...](https://image.slidesharecdn.com/20110827html5onasp-141030183843-conversion-gate02/75/html5-on-aspnet-40-2048.jpg?cb=1669057774)
![ HTML5.JS
◦ [参考]HTML5.jsの中身を見てみよう
<!--[if lt IE 9]>
<script src=
"http://html5shiv.googlecode.com/svn/trunk/html5.js"...](https://image.slidesharecdn.com/20110827html5onasp-141030183843-conversion-gate02/75/html5-on-aspnet-42-2048.jpg?cb=1669057774)
Confira estes a seguir
Mais Conteúdo rRelacionado
Diapositivos para si (20)
Semelhante a HTML5 on ASP.NET (20)
Mais de Fujio Kojima (20)
Mais recentes (20)
HTML5 on ASP.NET
- 1. 小島富治雄 @Fujiwo 福井コンピュータ株式会社 Microsoft MVP C# (2005-2012)
- 2. HTML5 に興味を持って いただく ASP.NET 開発環境で HTML5 を使う方法につ いて知っていただく
- 3. ASP.NET のトレンド Visual Studio でHTML5 を書くには HTML5 とは HTML5 で追加されたタグ HTML5 API HTML5 on ASP.NET Tips
- 4. • HTML5 周辺 ◦ HTML 5 ◦ CSS 3 ◦ Web API • ECMAScript ◦ jQuery • REST • RIA
- 5. • Web フォームvs. MVC • ASP.NET MVC 3 ◦ “Razor” ◦ HTML5 CSS3 対応プロジェクト テンプレート ◦ 最新jQuery 対応 ◦ NuGet ◦ Azure 対応
- 6. HTML5 CSS3 対応 プロジェクト テンプレート 最新jQuery 対応
- 7. • ASP.NET MVC 3 Tools Update ◦ Visual Studio 2010 のテンプレート とツール
- 8. • 準備 ◦ HTML5、CSS３対応 インテリセンス、文法チェック ◦ jQuery 用コードスニペット
- 9. • HTML5、CSS3対応 インテリセンス、文法チェック ◦Web Standards Update for Microsoft Visual Studio 2010 SP1
- 10. ◦ jQuery 用コードスニペット ◦ jQuery Cod Snippets for Visual Studio 2010 $(title).fadeOut(1000); $(title).fadeIn (1000);
- 11. • HTML5、CSS3 に対応 • Expression Web 4 Service Pack 1 Available for Download - MSDN Blogs ◦ Microsoft Expression Web 4 Service Pack 1
- 12. HTML5を学ぶなら必ず見ておきたい WEBサイト35選 HTML5の可能性を体験できる、すご いサイトのまとめ HTML5で作られた美しいサイト12 | Web活メモ帳
- 13. 狭義のHTML 5 CSS 3 API ECMAScript
- 14. Open Web Technology Platform ◦オープンかつ標準 2011/5/25 最終草案 ◦ 使い始めて良い ◦2014 W3C勧告(予定)
- 15. HTML5 & CSS3 Support, Web Design Tools & Support - FindMeByIP - CSS3 & HTML5 Browser Support http://www.findmebyip.com/litmus/
- 16. <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <title>タイトル</title> <link rel="stylesheet" href="style.css"> <script src="linq.js"></script> </head> <body> <!--ページ・コンテンツ--> </body> </html>
- 17. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="ja" /> <title>タイトル</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="linq.js"></script> </head> <body> <!--ページ・コンテンツ--> </body> </html>
- 18. セマンティクス ◦<section> ◦<nav> ◦<figure> ◦<time>
- 19. グラフィックス ◦<canvas> マルチメディア ◦<audio> ◦<video>
- 20. コントロール ◦<input> ◦<progress> ◦<meter> UI ◦<details> ◦<menu> ◦<command>
- 21. • Ruby • MathML • SVG • WAI-AREA
- 22. <ruby>瓊脂<rp> (</rp><rt>ところてん </rt><rp>)</rp></ruby>は<ruby>石花 菜<rp> (</rp><rt>てんぐさ </rt><rp>)</rp></ruby>から作られる。
- 23. <figure> <img src="DSCF7297.JPG" width="240" height="180" alt="かんぱーい!" /> <figcaption>先週のイベントの様子 その1</figcaption> </figure>
- 24. <video src="v.mp4" controls></video> <audio src="v.mp3" controls></audio> <video autoplay="autoplay" loop="loop“ width="480" height="272"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <p>動画を再生するには、videoタグをサポートしたブラウ ザが必要です。</p> </video>
- 25. 検索: <input type="search"> 電話番号: <input type="tel"> URL: <input type="url"> Email: <input type="email"> 日付: <input type="date"> 時刻: <input type="time"> 数値: <input type="number"> 範囲: <input type="range"> 色: <input type="color">
- 26. テキスト(入力必須): <input type="text" required> 郵便番号: <input type="text“ pattern="¥d{3}¥-¥d{4}“ title="郵便番号：999-9999形式で入力してください。">
- 27. 進捗: <progress value="50" max="100"></progress> メーター: <meter value="50.0" min="0" max="100" ></meter>
- 28. 二次元ラスターグラフィック ◦高速描画 ◦アニメーション可 ◦三次元やベクター描画はSVG を使う
- 29. <canvas width="300" height="300"></canvas>
- 30. var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); // 矩形描画 context.clearRect(0, 0, canvas.width, canvas.height); context.fillRect(50, 50, 200, 200); context.strokeRect(20, 20, 260, 260);
- 31. var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); // パス描画 context.beginPath(); context.moveTo(150, 30); context.lineTo( 30, 270); context.lineTo(270, 270); context.closePath(); context.fillStyle= "Yellow"; context.fill(); context.strokeStyle= "Red"; context.stroke();
- 32. var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); // 円描画 context.beginPath(); context.arc(150, 150, 50, 0, Math.PI * 2, true); context.fillStyle = "Magenta"; context.fill(); context.strokeStyle = "Blue"; context.stroke();
- 33. setTimeout() またはsetInterval() var flops = 60; window.setInterval( function() { context.clearRect(0, 0, canvas.width, canvas.height); // 描画 }, 1000 / flops);
- 34. <svg width="540" height="200" viewBox="0 0 270 100" style="margin:-2em 0em -3em 0em"> <defs> <radialGradient id="radial" cx="50%" cy="50%" fx="25%" fy="25%"> <stop offset="0%" stop-color="#60bafc" /> <stop offset="50%" stop-color="#409adc" /> <stop offset="100%" stop-color="#005a9c" /> </radialGradient> <path id="curve" d="M18,60 C100,10 180,110 264,60" fill="none"/> </defs> <circle cx="138" cy="50" r="38" fill="url(#radial)" stroke="#005a9c" /> <text font-family="Verdana" font-size="20" fill="#ff9900"> <textPath xlink:href="#curve" method="stretch" style="visibility: visible;">Scalable <tspan fill="white">Vector</tspan> Graphics </textPath> </text> </svg>
- 35. <math style="display:block"> <mi>t2</mi> <mo>=</mo> <mfrac> <mi>t1</mi> <msqrt><mrow> <mn>1</mn> <mo>-</mo> <mfrac> <msup> <mi>v</mi> <mn>2</mn> </msup> <msup> <mi>C</mi> <mn>2</mn> </msup> </mfrac> </mrow></msqrt> </mfrac> </math>
- 36. function show(pos) { var location ="<span>"+"緯度：" + pos.coords.latitude + "</span>"; location += "<span>"+"経度：" + pos.coords.longitude + "</span>"; document.getElementById("location").innerHTML = location; } if (navigator.geolocation) { window.alert("本ブラウザでGeolocation が使えます。"); window.navigator.geolocation.getCurrentPosition(show); } else { window.alert("本ブラウザではGeolocation が使えません。"); }
- 37. // localStorage への格納 var storage = localStorage; var value = "1" storage.setItem("A", value); // localStorage からの取得 var storage = localStorage; var value = storage.getItem("A");
- 38. HTML5 をレンダリングする サーバーコントロールを 作成して貼る
- 39. JavaScript で直にサービスを呼び出す 1. 「AJAX 対応WCF サービス」を作成 2.ASPX 側にScriptManager を貼り、 サービスを指定 3. JavaScript でサービスをnew して サービス内のメソッドを呼び出す
- 40. // MyService.svc - MyService.cs [ServiceContract(Namespace = "MyServices")] [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] public class MyService { [OperationContract] public object MyMethod() { return 何かのデータ; } }
- 41. // MyPage.aspx <script> onload = function() { var service = new MyServices.MyService(); service.MyMethod(onSuccess, null, null); } function onSuccess(data) { // data を描画 } </script> <asp:ScriptManager ID="scriptManager" runat="server"> <services> <asp:servicereference Path="MyService.svc" /> </services> </asp:ScriptManager>
- 42. HTML5.JS ◦ [参考]HTML5.jsの中身を見てみよう <!--[if lt IE 9]> <script src= "http://html5shiv.googlecode.com/svn/trunk/html5.js" > </script> <![endif]--> article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block; }
- 43. • JavaScriptで配列をLINQにより処 理できるライブラリ「linq.js」を利 用するには？ • neue cc - linq.js LT資料料 var result = Enumerable.From(jsonArray) .Where("$.Count > 5") .OrderByDescending("$.Count") .ThenBy("$.Name") .Select("$.Name") .ToArray();
- 44. Internet Explorer の 「スクリプトのデバッグを使用しな い(Internet Explorer)」 のチェックを外す Internet Explorer のみ Visual Studio でデバッグ実行 ◦ ブレークポイントやトレース実行
- 45. もうHTML5 で Visual Studio はHTML5 エディターとしても既にい ける
