Web Information System Design No.6 Web 文書空間 萩野達也 (hagino@sfc.keio.ac.jp) 1
Web 文書の全体構成要素 Web 文書 XML データ文書 XML アプリケーション HTTP URI 参照操作 Unicode 2
HTML 以外の XML アプリケーション HTML の成功を XML に Extensible Stylesheet (XSL) XML Linking Language (XLink) HTML に欠けているものを MathML Scalable Vector Graphics すべての文書を XML に Synchronized Multimedia Integration Language XML Schema 3
XML 文書での位置指定 XPath XML 文書内の位置を指定したい テキストの文字の位置ではずれるかもしれない 構造を使って指定 XPointer (XML Pointer Language) XML の一部分 ( 領域 ) を指定したい XPath の拡張 XML 文書の注釈などに利用 ハイパーリンクの開始と終了を指定 4
電子メールの XML <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE email SYSTEM "email.dtd"> <email> <head> <from name=" 萩野達也 " address="hagino@sfc.keio.ac.jp"/> <to name=" 慶應太郎 " address="taro@keio.ac.jp"/> <subject>web Lectures</subject> </head> <body> 慶応太郎様, Web の授業に来てください. </body> </email> 5
XPath /AxisSpecifier::NodeTest[Predicate]/AxisSpecifier::NodeTest[Predicate]/... root email head from to name address name address subject head body 萩野達也 hagino@sfc. keio.ac.jp 慶応太郎 taro@keio.ac.jp Web 授業慶応太郎様, Web の授業に来てください. 6
XPath の例 /child::email/child::head/child::to/attribute::name 省略形 /email/head/to/@name /email/head/to[last()] /decendant::to[last()] //to[last()] 7
XML にスタイルを付ける XMLスタイルシート CSSでは不十分 プログラミング言語に匹敵する能力が必要 宣言的をできるだけ保ちたい XSL XSL Transformations (XSLT) Version 2.0 Extensible Stylesheet Language (XSL) Version 1.1 8
XSLT の例 <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:template match="/author"> <html> <head> <title>author</title> </head> <body bgcolor="white"> <b> <xsl:value-of select="name" /> </b> <br /> <xsl:value-of select="affiliation" /> <br /> <i> <xsl:value-of select="email" /> </i> </body> </html> </xsl:template> </xsl:stylesheet> <?xml version="1.0" encoding="utf-8"?> <author> <name>tatsuya Hagino</name> <affiliation>keio University</affiliation> <email>hagino@sfc.keio.ac.jp</email> </authro> <html> <head><title>author</title></head> <body bgcolor="white"> <b>tatsuya Hagino</b><br/> Keio UNiversity<br/> <i>hagino@sfc.keio.ac.jp</i> </body> </html> 9
HTML の数式 数式 複雑な数式を書きたいきれいに表示したい 数式の意味を表したい コピー ペーストで数式を利用 MathML Mathematical Markup Language (MathML) Version 2.0 (Second Edition) x = 2 -b ± b -4ac 2a 10
数式を木構造で表す Presentation Element 30の要素約 50の属性数学記法をコーディング 例 : mfracは分数を表す数式の表示を思うように表すことができる見た目だけになり, 音声ブラウザなどで読み上げると分けが分からないものになることも多い Content Element 約 100の要素 約 12の属性 数学の関数や演算子を表す 例 : plus, sin 数学のオブジェクトを表すものもある. 例 : set, vector 表示以外の目的で使う : 音声ブラウザ, 数式処理 表示がどのようになるかコントロールするのが難しい (a + b) 2 <msup> <mfenced> <mi>a</mi> <mo>+</mo> <mi>b</mi> </mfenced> <mn>2</mn> </msup> <apply> <power/> <apply> <plus/> <ci>a</ci> <ci>b</ci> </apply> <cn>2</cn> </apply> 11
HTML のグラフィックス グラフィックス GIFやPNGやJPEGはビットマップ画像 ベクトル画像が欲しい SVG Scalable Vector Graphics (SVG) 1.1 Specification Scalable Vector Graphics (SVG) Tiny 1.2 Specification PDFに近いがXML 形式 12
SVG の例 <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"> <text style="fill:red;" y="2cm">this is SVG.</text> </svg> <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"> <rect style="fill:blue" width="100" height="30" x="10" y="3"/> <path d="m 100 60 L 200 10 L 200 120 z"/> </svg> 13
Web アクセシビリティ アクセシビリティ 情報にアクセスすることができるちゃんと利用できるかどうか以前の問題 Web アクセシビリティ Webは重要な情報源である健常者だけでなく障害者にも利用できるよう Web for everybody ユニバーサルデザイン バリアフリーデザインの段階でみんな ( お年寄り, 障害者 ) が利用することを考慮する アクセシビリティは障害者のためだけではない 車の運転中は両手が使えない携帯電話は画面が小さい 14
アクセシビリティガイドライン Web Content Accessibility Guidelines Web ページを記述する場合のガイドライン Authoring Tool Accessibility Guidelines Web ページを自動生成するオーサリングツールに対するガイドライン User Agent Accessibility Guidelines Web ブラウザに対するガイドライン 15
Web Content Accessibility Guidelines 1.0 1. 聴覚的および視覚的コンテンツに等価代替物を提供する 2. 色だけに頼らない 3. マークアップとスタイルシートを適切に使用する 4. 自然言語の使用を明確にする 5. スムーズに変換されるようなテーブルを作成する 6. 新しい技術を使用したページのスムーズな変換を保証する 7. 時間に敏感なコンテンツ変更のユーザー制御を保証する 8. 埋込みユーザー インターフェースへの直接的なアクセシビリティを保証する 9. デバイスに依存しない設計 10. 暫定的ソリューションを使用する 11. W3Cの技術と指針を使用する 12. コンテンツとオリエンテーションに関する情報を提供する 13. わかりやすいナビゲーション機構を提供する 14. わかりやすく シンプルな文書を保証する 16
指針 2. 色だけに頼らない 2.1 色が表す全部の情報が 色なしでも ( 例 コンテキストまたはマークアップから ) 入手可能なことを保証します [ 優先度 1] 2.2 前景色と背景色の組合せが 色に関する障害を持つ人々が見たり 白黒画面で見た場合に十分なコントラストを提供することを保証します [ イメージについては優先度 2 テキストについては優先度 3] 17
Web Content Accessibility Guidelines 2.0 原則 1: 知覚可能 (Perceivable) 情報およびユーザインタフェースの構成要素は ユーザが知覚できる方法でユーザに提示可能でなければならない 原則 2: 操作可能 (Operable) ユーザインタフェースの構成要素およびナビゲーションは操作可能でなければならない 原則 3: 理解可能 (Understandable) 情報およびユーザインタフェースの操作は理解可能でなければならない 原則 4: ロバスト性 (Robust) W3C 勧告 2008 年 12 月 11 日 コンテンツは 支援技術を含む様々なユーザエージェントが確実に解釈できるように十分に堅牢でなければならない 18
Web 文書関連の技術 Web 文書 アクセシビリティ Webサイトのデザイン インタラクション Web 文書 JavaScript RSS サマリ XML アプリケーション RDF XPath メタデータ XMLスタイルシート MathML SVG 内容 HTML pictures movies CSS 表現 アクセシビリティ ガイドライン XSL MathML SVG 19
グループワーク グループワーク 3 人一組のグループで共同で行うこと 課題 HTML6 の提案 現在のHTMLで不満に思っていることを挙げ, それを解決するHTML6を提案してください. HTMLの文書形式に関することでも, 機能に関することでも, サーバやPHPのようなプログラミング環境に関することでも構いません. 準備するもの 発表 注意 5 分間のプレゼンテーション現在のWeb 問題点 解決策 提案 SFC-SFSに発表日の正午までにプレゼンテーションのPPTあるいはPDFアップすること 6 月 1 日に各グループ5 分で発表してもらいます早慶戦で6 月 1 日の授業がなかった場合には6 月 8 日になります プレゼンテーションのタイトルページに ( 貢献した ) グループメンバーを書くこと 20