Your SlideShare is downloading. ×
  • Like
HTML5, きちんと。
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML5, きちんと。

  • 806,823 views
Published

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

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
806,823
On SlideShare
0
From Embeds
0
Number of Embeds
113

Actions

Shares
Downloads
1,498
Comments
10
Likes
273

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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