『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩 
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 3,763 views

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

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

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

Statistics

Views

Total Views
3,763
Views on SlideShare
3,578
Embed Views
185

Actions

Likes
0
Downloads
7
Comments
0

3 Embeds 185

http://swapskills.info 182
http://www.slideshare.net 2
http://webcache.googleusercontent.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 複合文書を作ってみよう!! 2009年4月5日 小山田晃浩
  • 自己紹介 名前            : 小山田 晃浩 やってること : HTMLコーダー (株式会社メタフェイズ) Weblogで情報発信 : http://www.yomotsu.net たまに雑誌の記事を執筆 : web creators
  • アジェンダ 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 Multimedia Integration Language) マルチメディアオブジェクト記述用 RDF (Resource Description Framework) メタデータ記述用 XUL (XML-based User Interface Language) ユーザーインターフェイス記述用 XSL/XSLT, XForms, XPath, XPointer, XLink ...
  • [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://global/content/alerts/alert.xul C:Program FilesMozilla Firefoxchrome にある browser.jar を解凍すると格納されている
  • [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; charset=utf-8quot; /> *実際はmeta要素を変えても意味がなく、サーバの設定を変えな いといけない
  • 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に移行 できるようにしておくべき。 http://standards.mitsue.co. jp/resources/w3c/TR/xhtml-media- types/#media-types
  • まとめ XHTMLは「文章」のためのXML XMLへの移行を考えてしっかりXHTMLを書く!!
  • まとめ 「XHTMLでお願いします!!」という依頼はプロ の仕事になるかも CMSはパースエラーを補って出力してくれる ようになるかも
  • XML にも興味を持って 妥当な XHTML を書きましょう