0
複合文書を作ってみよう!!
       2009年4月5日
         小山田晃浩
自己紹介
名前            : 小山田 晃浩
やってること : HTMLコーダー (株式会社メタフェイズ)

Weblogで情報発信 :
http://www.yomotsu.net

たまに雑誌の記事を執筆 :
web creato...
アジェンダ
 1. いろいろなXML規格
 2. 複合文書とは / 複合文書の作り方
 3. XML な XHTML

 4. 時間があまったらおまけdemo
XHTML書いていますか?
ではXHTMLって
何をするためにあるのでしょう?
XHTMLは...
『文書フォーマットを記述するためのXML』
XHTML以外のXML規格
XMLの規格はいろいろなものがある
XHTML以外のXML規格
SVG (Scalable Vector Graphics)
ベクターグラフィック記述用
MathML (Mathematical Markup Language)
数式記述用
SMIL (Synchronized ...
[demo]
    SVG
[demo1_firefox.svg]
[拡大しても劣化しないベクターイメージ]
[Illustratorは SVG 形式での保存ができる]
[demo]
  MathML
[demo2_mathml.xml]
[数式を表示した例]
[demo]
Firefox につかわれているXUL
   chrome://browser/content/browser.xul
  chrome://global/content/printdialog.xul
  chrome://gl...
[URLバーに「chrome://browser/content/browser.xul」を入力]
HTMLがXMLになった理由
HTMLの仕様が大きくなってきたので
XMLにして切り分けることにした
XMLは混ぜることができる
[色々あると混ぜたくなりますよね!!]
[異なるXML規格を複合することができる]
XMLは混ぜることができる
これを XML 複合文書
(CDF - Compound Document Format) という




http://www.w3.org/2004/CDF/
XMLは混ぜることができる
例えば 
XHTML + SVG + MathML
などができる。
[demo]
XHTML + SVG + MathML
   [demo4_xhtml+mathml+svg.xml]
[混ぜ方]
XML語彙の混ぜ方
どうやって混ぜるのか?

いくつか混ぜ方はありますが
そのうちの一つを紹介
XML語彙の混ぜ方
1. まずはXMLを用意。
   今回はXHTMLをベースに。

    [demo : 用意したXHTMLのコード]
XML語彙の混ぜ方
2. 混ぜる語彙を用意。
   今回はSVGを混ぜてみる

      [demo : SVG のコード]
XML語彙の混ぜ方
3. 名前空間の宣言を追加

   [demo : SVG の名前空間の宣言]
[Picture Caption]
XML語彙の混ぜ方
4. 名前空間に対する接頭辞を
   追加した状態のSVG

   [demo : 接頭辞付きのSVGの要素]
[Picture Caption]
XML語彙の混ぜ方
4. 完成!!

          [demo : XHTML + SVG]
混ぜ方ポイント
1. XML であること
2. 名前空間を宣言する / 接頭辞をつける
  (どの語彙に属す要素なのかを分ける)
[XML な XHTML]
XML な XHTML
 混ぜるときに使った XHTML は
 いつも使う XHTML とは少し違う。
XML な XHTML
 例えば...
  well-formed でなければいけない
  document.write() が使えない
  (多くのブログパーツが使えない)
  IE で表示できない
[demo]
パースエラー
[Picture Caption]
[XML が Well-formdでないと解析エラーになる]
[demo]
IEで表示できない
[XHTMLが表示できない。XHTML1.1を使わない理由。]
text/html と application/xhtml+xml

  XHTML の Content-Type は2種類がある

    text/html
    application/xhtml+xml
[demo]
Live HTTP Headersをつかって確認
[Content-Typeを調べることができる]
text/html と application/xhtml+xml
  皆さんは text/html を採用しているはず...

  <meta http-equiv=quot;Content-Typequot; content=quot;
 ...
text/html と application/xhtml+xml

    text/html
     HTML として処理される
    application/xhtml+xml
    XHTML (XML) として処理される
text/html と application/xhtml+xml

  XHTML 1.0 の仕様ではどちらでも構わないこと
  になっているので text/html で書いてもOK。

  どうせ XHTML を書くのならいつでも XMLに...
まとめ



  XHTMLは「文章」のためのXML
  XMLへの移行を考えてしっかりXHTMLを書く!!
まとめ



  「XHTMLでお願いします!!」という依頼はプロ
  の仕事になるかも
  CMSはパースエラーを補って出力してくれる
  ようになるかも
XML にも興味を持って
妥当な XHTML を書きましょう
Upcoming SlideShare
Loading in...5
×

『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩 

2,612

Published on

『XHTML+SVG+MathMLの技術を知る! 』
小山田 晃浩 2009/4/5開催SwapSkills

* XML複合文書とは
* なぜXHTMLでマークアップすべきか?
* XML複合文書の実践例

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,612
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩 "

  1. 1. 複合文書を作ってみよう!! 2009年4月5日 小山田晃浩
  2. 2. 自己紹介 名前            : 小山田 晃浩 やってること : HTMLコーダー (株式会社メタフェイズ) Weblogで情報発信 : http://www.yomotsu.net たまに雑誌の記事を執筆 : web creators
  3. 3. アジェンダ 1. いろいろなXML規格 2. 複合文書とは / 複合文書の作り方 3. XML な XHTML 4. 時間があまったらおまけdemo
  4. 4. XHTML書いていますか?
  5. 5. ではXHTMLって 何をするためにあるのでしょう?
  6. 6. XHTMLは... 『文書フォーマットを記述するためのXML』
  7. 7. XHTML以外のXML規格 XMLの規格はいろいろなものがある
  8. 8. XHTML以外のXML規格 SVG (Scalable Vector Graphics) ベクターグラフィック記述用 MathML (Mathematical Markup Language) 数式記述用 SMIL (Synchronized Multimedia Integration Language) マルチメディアオブジェクト記述用 RDF (Resource Description Framework) メタデータ記述用 XUL (XML-based User Interface Language) ユーザーインターフェイス記述用 XSL/XSLT, XForms, XPath, XPointer, XLink ...
  9. 9. [demo] SVG [demo1_firefox.svg]
  10. 10. [拡大しても劣化しないベクターイメージ]
  11. 11. [Illustratorは SVG 形式での保存ができる]
  12. 12. [demo] MathML [demo2_mathml.xml]
  13. 13. [数式を表示した例]
  14. 14. [demo] Firefox につかわれているXUL chrome://browser/content/browser.xul chrome://global/content/printdialog.xul chrome://global/content/alerts/alert.xul C:Program FilesMozilla Firefoxchrome にある browser.jar を解凍すると格納されている
  15. 15. [URLバーに「chrome://browser/content/browser.xul」を入力]
  16. 16. HTMLがXMLになった理由 HTMLの仕様が大きくなってきたので XMLにして切り分けることにした
  17. 17. XMLは混ぜることができる
  18. 18. [色々あると混ぜたくなりますよね!!]
  19. 19. [異なるXML規格を複合することができる]
  20. 20. XMLは混ぜることができる これを XML 複合文書 (CDF - Compound Document Format) という http://www.w3.org/2004/CDF/
  21. 21. XMLは混ぜることができる 例えば  XHTML + SVG + MathML などができる。
  22. 22. [demo] XHTML + SVG + MathML [demo4_xhtml+mathml+svg.xml]
  23. 23. [混ぜ方]
  24. 24. XML語彙の混ぜ方 どうやって混ぜるのか? いくつか混ぜ方はありますが そのうちの一つを紹介
  25. 25. XML語彙の混ぜ方 1. まずはXMLを用意。 今回はXHTMLをベースに。 [demo : 用意したXHTMLのコード]
  26. 26. XML語彙の混ぜ方 2. 混ぜる語彙を用意。 今回はSVGを混ぜてみる [demo : SVG のコード]
  27. 27. XML語彙の混ぜ方 3. 名前空間の宣言を追加 [demo : SVG の名前空間の宣言]
  28. 28. [Picture Caption]
  29. 29. XML語彙の混ぜ方 4. 名前空間に対する接頭辞を 追加した状態のSVG [demo : 接頭辞付きのSVGの要素]
  30. 30. [Picture Caption]
  31. 31. XML語彙の混ぜ方 4. 完成!! [demo : XHTML + SVG]
  32. 32. 混ぜ方ポイント 1. XML であること 2. 名前空間を宣言する / 接頭辞をつける   (どの語彙に属す要素なのかを分ける)
  33. 33. [XML な XHTML]
  34. 34. XML な XHTML 混ぜるときに使った XHTML は いつも使う XHTML とは少し違う。
  35. 35. XML な XHTML 例えば... well-formed でなければいけない document.write() が使えない (多くのブログパーツが使えない) IE で表示できない
  36. 36. [demo] パースエラー
  37. 37. [Picture Caption]
  38. 38. [XML が Well-formdでないと解析エラーになる]
  39. 39. [demo] IEで表示できない
  40. 40. [XHTMLが表示できない。XHTML1.1を使わない理由。]
  41. 41. text/html と application/xhtml+xml XHTML の Content-Type は2種類がある text/html application/xhtml+xml
  42. 42. [demo] Live HTTP Headersをつかって確認
  43. 43. [Content-Typeを調べることができる]
  44. 44. text/html と application/xhtml+xml 皆さんは text/html を採用しているはず... <meta http-equiv=quot;Content-Typequot; content=quot; text/html; charset=utf-8quot; /> *実際はmeta要素を変えても意味がなく、サーバの設定を変えな いといけない
  45. 45. text/html と application/xhtml+xml text/html HTML として処理される application/xhtml+xml XHTML (XML) として処理される
  46. 46. text/html と application/xhtml+xml XHTML 1.0 の仕様ではどちらでも構わないこと になっているので text/html で書いてもOK。 どうせ XHTML を書くのならいつでも XMLに移行 できるようにしておくべき。 http://standards.mitsue.co. jp/resources/w3c/TR/xhtml-media- types/#media-types
  47. 47. まとめ XHTMLは「文章」のためのXML XMLへの移行を考えてしっかりXHTMLを書く!!
  48. 48. まとめ 「XHTMLでお願いします!!」という依頼はプロ の仕事になるかも CMSはパースエラーを補って出力してくれる ようになるかも
  49. 49. XML にも興味を持って 妥当な XHTML を書きましょう
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×