-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
53 lines (42 loc) · 10.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE 5 ><!--<Google>HTML5 slide template</Google><Authors><Luke>Mahé (code)<Marcin>Wichary (code and design)</Marcin><Dominic>Mazzoni (browser compatibility)</Dominic><Charles>Chen (ChromeVox support)</Charles></Luke></Authors><URL><http><code.google.com/p/html5slides/></code.google.com/p/html5slides/></http></URL>--><html><head><title>第2回HTML5読書会</title><meta charset="utf-8"/><script src="./slides.js"></script></head><body style="display: none"><section class="slides layout-regular template-default"><article><h1>第2回HTML5読書会<br/>4,5章
</h1><p>kzfm<br/></p></article><article><h3>はじめに</h3><p>資料は<a href="https://github.com/kzfm/HTML5reading2">GitHub</a>にあります
</p><pre>git clone [email protected]:kzfm/HTML5reading2.git
</pre><p>またはzipでダウンロード</p><p>簡易HTTPサーバーはpythonの場合</p><pre>python -m SimpleHTTPServer
</pre></article><article><h3>前回のおさらいと今回の内容</h3><ul><li>HTML5はセマンティクス重視</li><li>見た目のほうはCSSに任せる</li><li>4章は見た目を良くするためのCSS3の入門的な内容</li><li>5章はセマンティクスとアクセシビリティの話題</li></ul></article><article><h2>4章<br/>CSS3を使った<br>ユーザーインターフェースの改善
</h2></article><article><h3>CSS3のセレクタとは何か</h3></h3><p>セレクタとは、HTMLドキュメント内の要素を検索する際に指定するパターン</p><ul class="build"><li><dl><dt>:nth-of-type</dt><dd>特定のタイプのn番目の要素を全て検索</dd></dl></li><li><dl><dt>:first-child </dt><dd>最初の子要素を検索</dd></dl></li><li><dl><dt>:nth-child</dt><dd>先頭から数えて指定された位置にある子要素を検索</dd></dl></li><li><dl><dt>:last-child</dt><dd>最後の子要素を検索 </dd></dl></li></ul></article><article><h3>CSS3のセレクタ(続き)</h3><ul class="build"><li><dl><dt>:nth-last-child</dt><dd>末尾から数えて指定された位置にある子要素を検索</dd></dl></li><li><dl><dt>:first-of-type</dt><dd>指定されたタイプの最初の要素を検索</dd></dl></li><li><dl><dt>:last-of-type </dt><dd>指定されたタイプの最後の要素を検索</dd></dl></li><li><dl><dt>列のサポートと:after </dt><dd>後の事例を実際に触ったほうがわかりやすい</dd></dl></li><li><dl><dt>メディアクエリ </dt><dd>デバイスの画像解像度に応じてcssを切り替える（レスポンシブ・ウェブデザイン）</dd></dl></li></ul></article><article class="smaller"><h3>nth-of-typeとnth-childの違い</h3><h4>div p:nth-of-type(3){color:#f00;}</h4><div><p>1番目のp</p><hr/><p>2番目のp</p><p style="color:#f00">3番目のp</p></div><h4>div p:nth-child(3){color:#f00;}</h4><div><p>1番目のp</p><hr/><p style="color:#f00">2番目のp</p><p>3番目のp</p></div></article><article><h3>レスポンシブウェブデザイン</h3><p><a href="http://mediaqueri.es/">こういったあたり</a></p><p><img style="width: 600px" src="images/responsiveweb.png"/></p><p><a href="http://responsivepx.com/">responsivepx</a>が地味に便利です
</p></article><article class="smaller"><h3>擬似クラスを使ってテーブルのスタイルを設定する</h3><table><tr><th>Item</th><th>Price</th><th>Quantity</th><th>Total</th></tr><tr><td>Coffee mug</td><td>$10.00</td><td>5</td><td>$50.00</td></tr><tr><td>Polo shirt</td><td>$20.00</td><td>5</td><td>$100.00</td></tr><tr><td>Red stapler</td><td>$9.00</td><td>4</td><td>$36.00</td></tr><tr><td colspan="3">Subtotal</td><td>$186.00</td></tr><tr><td colspan="3">Shipping</td><td>$12.00</td></tr><tr><td colspan="3">Total Due</td><td>$198.00</td></tr></table><p>サンプルHTMLは<a href="https://github.com/kzfm/HTML5reading2">GitHub</a></p><p>または<a href="http://pragprog.com/titles/bhh5/source_code">書籍のサポートサイト</a>からダウンロードして下さい。
</p></article><article><h2>本を見ながらテーブルを改善するタイム</h2></article><article><h3>4章まとめ</h3><ul><li>CSS3つまりプレゼンテーション層でユーザーインターフェースの改善ができる</li><li>モダンでないブラウザのためのフォールバックも考慮する</li><li>ベンダープレフィックス</li><ul><li>すべて書く</li><li>標準的なプロパティを最後に記述する</li></ul></ul></article><article><h2>5章 <br/>アクセシビリティの向上
</h2></article><article><h3>WAI-ARIAとは</h3><p>WAI-ARIAとは、Web Accessibility Initiative-Accessible Rich
Internet Applicationsの略で、W3Cが現在、勧告に向けて策定作業
を進めているリッチなインターネットアプリケーションのアクセシ
ビリティに関する仕様書のことです。
</p><p><span class="red">JavaScriptやAjaxなどを使用した動的なコンテンツは、スクリーンリーダーやキーボード操作では利用できないことがあります。</span><WAI-ARIA>は、そういった問題を解決すべく、W3CのProtocols and Formats ワーキンググループ (PFWG) において策定されています。</WAI-ARIA></p><div class="source">Source: WAI-ARIA（日本語訳）</div></article><article><h3>Screen Readerの説明</h3><div id="__ss_6738595" style="width:595px"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/nishimotz/nishimotz-pycon2011jan" title="Nishimotz pycon2011jan" target="_blank">Nishimotz pycon2011jan</a></strong><object id="__sse6738595" width="595" height="497"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=nishimotz-pycon2011jan-110128162904-phpapp01&stripped_title=nishimotz-pycon2011jan&userName=nishimotz"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><param name="wmode" value="transparent"></param><embed name="__sse6738595" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=nishimotz-pycon2011jan-110128162904-phpapp01&stripped_title=nishimotz-pycon2011jan&userName=nishimotz" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="595" height="497"></embed></object></div></article><article class="nobackground"><h3>静岡だと三島のユニバーサルワークス</h3><iframe src="http://www.u-works.co.jp/services/accessibility"></iframe></article><article class="fill"><h3>WAI-ARIA</h3><q>Webサイト、特にWebアプリケーションのアクセシビリティを改善するための仕様</q></article><article><h3>アクセシビリティ技術</h3><ul class="build"><li>role属性: 要素の役割を示す</li><li>aria-live属性: 自動的に更新される領域(Ajaxなど)を示す</li><li>aria-atomic属性: 読み取りの範囲を示す</li></ul></article><article class="nobackground"><h3>ブラウザはサポートしているのか？(chromeの場合)</h3><iframe src="http://www.google.com/support/chrome/bin/answer.py?answer=96831"></iframe></article><article class="nobackground"><h3>ARIA ロールを使ってナビゲーションヒントを提示する</h3><iframe width="560" height="315" src="http://www.youtube.com/embed/4d3oGKz6QgY" frameborder="0" allowfullscreen="allowfullscreen"></iframe></article><article class="larger"><h3>ナビとかフッタとか毎度の読み上げうざい</h3><ul class="build"><li>どうしたらいいの？</li><li>スクリーンリーダーが理解できる「スキップリンク」を提供する</li><li>ロール属性が使える</li><li>セマンティックですね</li></ul></article><article><h3>ランドマークロール</h3><table><tr><th>ロール</th><th>目的</th></tr><tr><td>contentinfo</td><td>コンテンツに閑する情報が存在する場所を示す</td></tr><tr><td>その他</td><td>本を参照</td></tr></table><h4>使い方<pre><footer id="page_footer" role="contentinfo">
<p>© 2010 awesomeCo.</p>
</footer>
</pre></h4></article><article><h3>ドキュメントロール</h3><table><tr><th>ロール</th><th>目的</th></tr><tr><td>document</td><td>アプリケーションのコンテンツではなくドキュメントのコンテンツを含んでいる領域</td></tr><tr><td>その他</td><td>本を参照</td></tr></table><h4>使い方<pre><body role="document">
</pre><h4>フォールバック<p>ロールをサポートしてないブラウザでは単に無視される</p></h4></h4></article><article><h3>アクセシブルで更新可能な領域を作成</h3><p>alia-liveとalia-atomicを指定する</p><pre><section id="content"
role="document" alia-live="assertive" aria-atomic="true">
</pre><p>alia-liveが<span class="green">assertive</span>だと、読み上げの途中でも更新された部分を読み始めるが
<span class="green">polite</span>だと、読み終わりを待つ
</p><p>aria-atomic=trueだと変更された領域のコンテンツ全体を読み上げるがfalseの場合は変化したノードだけ読み上げる</p></article><article class="smaller nobackground"><h3>application.js</h3><p>説明いる？</p><pre>document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("article");
document.createElement("nav");
$(function(){
$("#services, #about, #contact").hide().addClass("hidden");
$("#welcome").addClass("visible");
$("nav ul").click(function(event){
target = $(event.target);
if(target.is("a")){
event.preventDefault();
if ( $(target.attr("href")).hasClass("hidden") ){
$(".visible").removeClass("visible")
.addClass("hidden")
.hide();
$(target.attr("href"))
.removeClass("hidden")
.addClass("visible")
.show();};};});});
</pre></article><article><h3>HTML5とWAI-ARIAの今後</h3><p>よりアクセシブルなWebへ</p><p>google readerとかのRSS読み上げてくれると車運転しながらRSSチェック出来るので嬉しいんだけど</p></article><article><h3>おわり</h3><p>これで第一部は終了</p><p><img src="http://ecx.images-amazon.com/images/I/51QCM4Kuz3L._SL160_.jpg" border="0" alt="ProductName"/></p><p>第二部はオーディオ、ビデオ関連ですね</p></article></section></body></html>