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

  • 2,476 views
Uploaded on

『XHTML+SVG+MathMLの技術を知る! 』 …

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,476
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
0

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