分散情報システム構成法

Size: px

Start display at page:

Download "分散情報システム構成法"

ひろとかりこめ
5 years ago
Views:

1 Web Information System Design No.6 Web 文書空間萩野達也 1

2 Web 文書の全体構成要素 Web 文書 XML データ文書 XML アプリケーション HTTP URI 参照操作 Unicode 2

3 HTML 以外の XML アプリケーション HTML の成功を XML に Extensible Stylesheet (XSL) XML Linking Language (XLink) HTML に欠けているものを MathML Scalable Vector Graphics すべての文書を XML に Synchronized Multimedia Integration Language XML Schema 3

4 XML 文書での位置指定 XPath XML 文書内の位置を指定したいテキストの文字の位置ではずれるかもしれない構造を使って指定 XPointer (XML Pointer Language) XML の一部分 ( 領域 ) を指定したい XPath の拡張 XML 文書の注釈などに利用ハイパーリンクの開始と終了を指定 4

5 電子メールの XML <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE SYSTEM " .dtd"> < > <head> <from name=" 萩野達也 " <to name=" 慶應太郎 " <subject>web Lectures</subject> </head> <body> 慶応太郎様, Web の授業に来てください. </body> </ > 5

6 XPath /AxisSpecifier::NodeTest[Predicate]/AxisSpecifier::NodeTest[Predicate]/... root head from to name address name address subject head body 萩野達也 keio.ac.jp 慶応太郎 Web 授業慶応太郎様, Web の授業に来てください. 6

7 XPath の例 /child:: /child::head/child::to/attribute::name 省略形 / /head/to[last()] /decendant::to[last()] //to[last()] 7

8 XML にスタイルを付ける XMLスタイルシート CSSでは不十分プログラミング言語に匹敵する能力が必要宣言的をできるだけ保ちたい XSL XSL Transformations (XSLT) Version 2.0 Extensible Stylesheet Language (XSL) Version 1.1 8

9 XSLT の例 <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <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=" " /> </i> </body> </html> </xsl:template> </xsl:stylesheet> <?xml version="1.0" encoding="utf-8"?> <author> <name>tatsuya Hagino</name> <affiliation>keio University</affiliation> </authro> <html> <head><title>author</title></head> <body bgcolor="white"> <b>tatsuya Hagino</b><br/> Keio UNiversity<br/> </body> </html> 9

10 HTML の数式数式複雑な数式を書きたいきれいに表示したい数式の意味を表したいコピーペーストで数式を利用 MathML Mathematical Markup Language (MathML) Version 2.0 (Second Edition) x = 2 -b ± b -4ac 2a 10

11 数式を木構造で表す 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

12 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.

13 SVG の例 <?xml version="1.0"?> <svg xmlns=" width="300" height="300"> <text style="fill:red;" y="2cm">this is SVG.</text> </svg> <?xml version="1.0"?> <svg xmlns=" width="300" height="300"> <rect style="fill:blue" width="100" height="30" x="10" y="3"/> <path d="m L L z"/> </svg> 13

14 Web アクセシビリティアクセシビリティ情報にアクセスすることができるちゃんと利用できるかどうか以前の問題 Web アクセシビリティ Webは重要な情報源である健常者だけでなく障害者にも利用できるよう Web for everybody ユニバーサルデザインバリアフリーデザインの段階でみんな ( お年寄り, 障害者 ) が利用することを考慮するアクセシビリティは障害者のためだけではない車の運転中は両手が使えない携帯電話は画面が小さい 14

15 アクセシビリティガイドライン Web Content Accessibility Guidelines Web ページを記述する場合のガイドライン Authoring Tool Accessibility Guidelines Web ページを自動生成するオーサリングツールに対するガイドライン User Agent Accessibility Guidelines Web ブラウザに対するガイドライン 15

16 Web Content Accessibility Guidelines 聴覚的および視覚的コンテンツに等価代替物を提供する 2. 色だけに頼らない 3. マークアップとスタイルシートを適切に使用する 4. 自然言語の使用を明確にする 5. スムーズに変換されるようなテーブルを作成する 6. 新しい技術を使用したページのスムーズな変換を保証する 7. 時間に敏感なコンテンツ変更のユーザー制御を保証する 8. 埋込みユーザーインターフェースへの直接的なアクセシビリティを保証する 9. デバイスに依存しない設計 10. 暫定的ソリューションを使用する 11. W3Cの技術と指針を使用する 12. コンテンツとオリエンテーションに関する情報を提供する 13. わかりやすいナビゲーション機構を提供する 14. わかりやすくシンプルな文書を保証する 16

17 指針 2. 色だけに頼らない 2.1 色が表す全部の情報が色なしでも ( 例コンテキストまたはマークアップから ) 入手可能なことを保証します [ 優先度 1] 2.2 前景色と背景色の組合せが色に関する障害を持つ人々が見たり白黒画面で見た場合に十分なコントラストを提供することを保証します [ イメージについては優先度 2 テキストについては優先度 3] 17

18 Web Content Accessibility Guidelines 2.0 原則 1: 知覚可能 (Perceivable) 情報およびユーザインタフェースの構成要素はユーザが知覚できる方法でユーザに提示可能でなければならない原則 2: 操作可能 (Operable) ユーザインタフェースの構成要素およびナビゲーションは操作可能でなければならない原則 3: 理解可能 (Understandable) 情報およびユーザインタフェースの操作は理解可能でなければならない原則 4: ロバスト性 (Robust) W3C 勧告 2008 年 12 月 11 日コンテンツは支援技術を含む様々なユーザエージェントが確実に解釈できるように十分に堅牢でなければならない 18

19 Web 文書関連の技術 Web 文書アクセシビリティ Webサイトのデザインインタラクション Web 文書 JavaScript RSS サマリ XML アプリケーション RDF XPath メタデータ XMLスタイルシート MathML SVG 内容 HTML pictures movies CSS 表現アクセシビリティガイドライン XSL MathML SVG 19

20 グループワークグループワーク 3 人一組のグループで共同で行うこと課題 HTML6 の提案現在のHTMLで不満に思っていることを挙げ, それを解決するHTML6を提案してください. HTMLの文書形式に関することでも, 機能に関することでも, サーバやPHPのようなプログラミング環境に関することでも構いません. 準備するもの発表注意 5 分間のプレゼンテーション現在のWeb 問題点解決策提案 SFC-SFSに発表日の正午までにプレゼンテーションのPPTあるいはPDFアップすること 6 月 1 日に各グループ5 分で発表してもらいます早慶戦で6 月 1 日の授業がなかった場合には6 月 8 日になりますプレゼンテーションのタイトルページに ( 貢献した ) グループメンバーを書くこと 20

No.5 Webデザイン

No.5 Webデザイン Web 情報システム構成法 No.5 Web デザイン萩野達也 (hagino@sfc.keio.ac.jp) 1 Web デザイン大規模な Web サイトの構築単なるページの集まりでは不十分 Web 技術だけでは不十分ユーザビジネス情報アーキテクチャ情報構造を計画的に設計すること目的複雑なものをシンプルにする状況や目的に合わせるユーザにとってわかりやすくたどり着きやすい Web