The present document can't read!
Please download to view
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
...

HTML5, きちんと。

by masataka-yakura

on

Report

Category:

Technology

Download: 0

Comment: 0

798,468

views

Comments

Description

HTML5の概要や目的について説明しています。セクション関連要素についても紹介しています。

2009年のCSS Nite vol. 40で話したときのスライドです。
Download HTML5, きちんと。

Transcript

  • 1. HTML5, きちんと。 masataka yakura
  • 2. こんばんは。 矢倉といいます。
  • 3. http://www.mitsue.co.jp/
  • 4. Web 標準 Blog http://standards.mitsue.co.jp/
  • 5. Opera Web標準カリキュラム http://dev.opera.com/articles/view/801
  • 6. Web Designing 2009年11月号 (10月17日発売)
  • 7. 「HTML5 & CSS3 でWeb は変わるのか?」
  • 8. 監修しました → (11月21日発売)
  • 9. 「プロクリエイターの作例に学ぶXHTML+CSS 達人テクニック」
  • 10. 本日のテーマ:HTML5
  • 11. まだまだ情報が少ない。
  • 12. 背景や目的についても ある程度は知ってて欲しい。
  • 13. HTML5とは?HTML5のセクション XHTMLはどうなる? 勧告はいつごろ? もうひとつの目的どう使っていくか HTML5の新機能
  • 14. HTML5 とは?
  • 15. 「Web プラットフォーム」 その中核をなす仕様。
  • 16. HTML4 や XHTML1 は 「文書」の作成が目的だった。
  • 17. HTML5 では新たに 「アプリケーション」が加わる。
  • 18. これまでのあゆみ
  • 19. 1998 年 2 月 XML 1.0 が勧告。
  • 20. W3C は XML への移行を計画。
  • 21. HTML は段階を経て XML に移行するプランに。
  • 22. XHTML 1.0 ― HTML4 を XML 化 XHTML 1.1 ― 機能を細分化 XHTML 2.0 ― 新しく作り直し
  • 23. 2002 年~ ブログが普及しだす。
  • 24. 「XHTML+CSS」が広まる。
  • 25. ほとんどが text/html XMLとして使われなかった。
  • 26. Web アプリが台頭し 今の HTML では機能不足に。
  • 27. 新しい機能の実現に XML の普及を待つ必要がある?
  • 28. 2004 年 6 月 W3C のワークショップにて
  • 29. ベンダー「HTML の拡張を!」
  • 30. W3C「うちではやりませんがお好きにどうぞ。」
  • 31. Apple, Mozilla, Opera WHATWG を立ち上げる。
  • 32. ベンダーによって HTML の拡張が始められた。
  • 33. ベンダーが関わった仕様は 開発者から評価を得ていく。
  • 34. 2006 年 10 月 Tim Berners-Lee のブログにて
  • 35. It is necessary to evolve  HTML incrementally. The  attempt to get the world to  switch to XML […] all at once  didn’t work. ― Tim Berners‐Lee: “Reinventing HTML”
  • 36. 「XML への移行はいっせいには進まなかった。」
  • 37. 2007 年 3 月 新 HTML WG 設立。
  • 38. WHATWG と協力して HTML5 の策定をスタート。
  • 39. 2009 年 5 月 Google I/O で大プッシュ。
  • 40. 少しずつ実装も進んでいる。
  • 41. XHTML はどうなる?
  • 42. XHTML2 WG が 2009 年末で活動終了と発表。
  • 43. XHTML 2.0 は終了。 でも、XHTML はなくならない。
  • 44. HTML5 は XML として 扱うことも可能(XHTML5)
  • 45. HTML5 の HTML 構文でも 「XMLっぽく」書けるように。
  • 46. <img> ← 今までの HTML <img /> ← こっちも OK に! ※ 混在もできます。
  • 47. というわけで、ご心配なく。
  • 48. Misunderstanding Markup http://standards.mitsue.co.jp/resources/mm_comic/
  • 49. もうひとつの目的
  • 50. 「機能の拡張」もあるけれど 「互換性」も重要なテーマ。
  • 51. 1. ブラウザーの互換性
  • 52. Web アプリの開発には JavaScript や DOM が不可欠。
  • 53. クロスブラウザー対応は厄介。 互換性に問題がある。
  • 54. 非互換を生む 2 つの「ない」
  • 55. 実装 がない。 → 対応状況が異なる
  • 56. 仕様 がない。 → 実装に違いが生まれる
  • 57. 実装はベンダー依存だが 仕様は定義して対応できる。
  • 58. HTML5 では 詳細な処理規則を定義。
  • 59. 2. 既存の実装との互換性
  • 60. 今のブラウザーやサイトとも 互換性をある程度は保つ。
  • 61. 大きな変更はできないが 今の環境を捨てずに済む。
  • 62. 互換性を持つことで Webを段階的に進化させられる。
  • 63. HTML5 の新機能
  • 64. APIの追加や マークアップの拡張など。
  • 65. <canvas>
  • 66. スクリプトから画像を扱う。 応用はさまざま。
  • 67. Bespin https://bespin.mozilla.com/
  • 68. <canvas> で作られたエディタ。
  • 69. Chrome Experiments http://www.chromeexperiments.com/
  • 70. 最新技術のショーケース。
  • 71. <video> & <audio>
  • 72. <img> みたく、簡単に 動画・音声を扱えるように。
  • 73. <video src=“intro_html5.vid”><a …> ダウンロード </a> </video>
  • 74. プラグインじゃないので CSS や SVG と組み合わせが可能。
  • 75. マークアップ
  • 76. マークアップにも 数多くの拡張や変更が。
  • 77. <canvas> <audio> <video> <header> <footer> <section> <article> <nav> <aside> <hgroup> <figure> <details> <datalist> <meter> <progress> <time> <mark> <ruby> etc...
  • 78. よく使われる class/id を 要素として採用する。
  • 79. <div id=“header”> → <header><div class=“section”> → <section>
  • 80. 定型句はよりシンプルに。
  • 81. <!DOCTYPE html>
  • 82. <meta charset=“UTF-8”>
  • 83. 古いブラウザーでも機能する。
  • 84. フォームの拡張も。
  • 85. <input type=text ...> <input type=password ...>
  • 86. <input type=email ...> <input type=range ...> <input type=color ...> <input type=datetime ...> ...
  • 87. 名 前 (必須):メール (必須):
  • 88. <input type=“text” ... required> <input type=“email” ... required>
  • 89. サイト内検索: キーワードを入力
  • 90. <input type=“search”placeholder=“キーワードを入力”>
  • 91. HTML5 のセクション
  • 92. 文書構造をより明示的に表せる。
  • 93. <section> 章や節などの、ひとまとまり
  • 94. <section><h3> section 要素 </h3><p> 章や節などを表す。</p>... </section><section><h3> nav 要素 </h3><p> 主要なナビゲーションを表す。</p>... </section>
  • 95. <section><h3> article 要素 </h3><p> 自己完結するセクションを表す。</p> <section> <h4> サンプル </h4> ...</section></section>
  • 96. <nav> 主要なナビゲーション
  • 97. <nav class=“global”><ul> <li> <a ...> ホーム </a> <li> <a ...> お知らせ </a> <li> <a ...> HTML5 Niteって? </a> <li> <a ...> これまでのNite </a> <li> <a ...> お問い合わせ </a></ul> </nav>
  • 98. UA が <nav> を利用することで アクセシビリティも高まる?
  • 99. <article> 記事など、自己完結するセクション
  • 100. <article class=“entry” id=“vol40”> <h2> CSS Nite in Ginza, Vol. 40 </h2><p> 4周年記念となるVol.40では… </p> <section> <h3> 事前登録について </h3> ...</section>... </article>
  • 101. フィードの <item> や <entry> などをイメージ。
  • 102. <aside> 補足的な情報や、サイドバー
  • 103. <section><h2> nav 要素 </h2><p> 主要なナビゲーションを表します。 </p> <aside> <p> 海外では「navi」よりも 「nav」の方が多いみたいです。</p></aside></section>
  • 104. <header> ... </header> <div class=wrap><div class=main>...</div> <aside class=sidebar>...</aside> </div> <footer> ... </footer>
  • 105. セクションと見出しから アウトラインができる。
  • 106. <article><h1> HTML5 のセクション </h1><nav> ... </nav>...<section> <h2> nav 要素 </h2> ... <aside><h3>「navi」ではなく「nav」</h3>... </aside> ...</section> ...
  • 107. HTML5 のセクション(見出しなしの目次)section 要素nav 要素 「navi」ではなく「nav」article 要素aside 要素
  • 108. 見出しだけでも アウトラインはできる。
  • 109. <h1> HTML5 のセクション </h1><h2> section 要素 </h2><h2> nav 要素 </h2><h3>「navi」ではなく「nav」</h3><h2> article 要素 </h2>...
  • 110. HTML5 のセクションsection 要素nav 要素 「navi」ではなく「nav」article 要素aside 要素
  • 111. 注意!
  • 112. 使い方を間違えると アウトラインが壊れてしまう。
  • 113. 特に <section> は気をつけて。
  • 114. <article class=“entry”><header><h2> タイトル </h2></header> <section class=“body”> <p> 本文 </p> <p> テキストテキスト </p></section> <footer> ... </footer> </article>
  • 115. <header id=logo><section><h1> <img src=logo ...> </h1></section> </header>
  • 116. <section id=wrapper><section id=main> <article><section><header> ... </header>...</section> </article></section>... </section>
  • 117. セクションは意味的なもの。 アウトラインを意識して。
  • 118. レイアウト目的なら <div> で。
  • 119. 勧告はいつごろ?
  • 120. 「2010 年 9 月」とある。 でも、むりです。
  • 121. 「勧告」とは?
  • 122. 仕様がすべて実装され すぐに使える状態。
  • 123. 実装が終わるのは?
  • 124. 「2022 年」と……
  • 125. 「使えないじゃん!」
  • 126. そんなことはないです。
  • 127. たとえば、CSS 2.1 は まだ「勧告候補」です。
  • 128. 勧告されていませんが 広く使われてます。
  • 129. 実装されている機能から 使っていけばいい。
  • 130. 実装の本格的なスタートは 「勧告候補」になった時。
  • 131. 2012 年あたりになる?
  • 132. 実装状況を知るには?
  • 133. 1. 開発者向けサイト
  • 134. Mozilla Developer Center https://developer.mozilla.org/ja
  • 135. Safari Dev Center http://developer.apple.com/safari/
  • 136. 2. 仕様書のステータス表示
  • 137. どう使っていくか
  • 138. 「実装されてる機能から使え」 とは言ったものの……
  • 139. 対応しないブラウザーは どう対処すればよいのか?
  • 140. 1. JavaScript で対処
  • 141. ExplorerCanvas http://excanvas.sourceforge.net/
  • 142. IE に <canvas> を。
  • 143. Modernizr http://www.modernizr.com/
  • 144. 対応状況をチェックする。 classもつけてくれたりする。
  • 145. 2. 対応度合いにあわせて利用
  • 146. 最低限なものは、全ての環境で。 できる子には、高機能なものを。
  • 147. Progressive Enhancement って言われてるやつです。
  • 148. placeholder 属性 無くても不都合はない。
  • 149. 難しいことは確か。
  • 150. HTML5 や CSS3 は 勧告までとても時間がかかる。
  • 151. 今までと異なる考え方で 取り組んでいく必要がある。
  • 152. 今は何をすれば?
  • 153. 実装も出てきたけれど 仕様はまだまだ策定中。
  • 154. 「<article> と <section> を区別する必要はあるのか。」
  • 155. 「<section> の誤用が多い。いっそのこと削除しては?」
  • 156. 仕様がドラスティックに 変更される可能性も……
  • 157. 使う際には、リスクの認識を。
  • 158. おわりに
  • 159. 「情報が少ない」といいました。
  • 160. みんなが使っていく仕様 情報はみんなで共有したい。
  • 161. 調べたことをまとめて 情報を増やしていって欲しい。
  • 162. ありがとうございました。
  • 163. Contact: yakura-masataka@mitsue.co.jp
  • Fly UP