略語や用語の説明 (18 点)

次の略語や用語を説明しなさい。略語の場合は正式名称 (英語)、用語の場合はカタカナを使わない日本語訳を書きなさい。

XML: Extensible Markup Language; 文書やデータの構造を記述できる形式

element: 要素; XML の一番大事な部品、開始タグと終了タグと内容からなる

selector: 選択子; CSS でスタイルの適用範囲を決めるもの、例えば element とか .class

SVG: Scalable Vector Graphics; XML に基づいたウェブ用図形記述言語、拡大縮小可能

attribute name: 属性名; XML の要素の開始タグに記述される属性の名前、例えば date

CSS: Cascading Style Sheets; XML, (X)HTML, SVG などの見栄えをスタイルで記述する言語

well-formed: 整形 (式・済); XML の基本的な文法に従う文書、要素名や属性名が任意

property value: 特性値; CSS の設定の値、例えば色の場合、red や blue など

IRI: Internationalized Resource Identifiers; 英数字以外の文字も使えるウェブのアドレス

XHTML の例 (15 点)

下記のウェブページの一部の XHTML ソースを書きなさい。(スタイルは必要ない。)

XHTML の箇条書きの種類の例

番号なし箇条書き	番号つき箇条書き
XHTML SVG	XHTML SVG

<h1>XHTML の箇条書きの種類の例</h1><table>
  <tr>
    <th>番号なし箇条書き</th>
    <th>番号つき箇条書き</th>
  </tr>
  <tr><td>
        <ul><li>XHTML</li>
        <li>SVG</li></ul>
    </td><td>
      <ol><li>XHTML</li>
        <li>SVG</li></ol>
  </td></tr>
</table>

XML, XHTML や SVG の実際の使用 (12 点)

自分の身の回り (例えば個人、学問、サークル、バイト先など) に XML, XHTML や SVG がどのように使えるのか一つの例を考えて詳しく説明しなさい。

箱モデルとスタイル (２４ 点)

以下にそれぞれの例文にスタイルの欄に書いてあるスタイルを適用し、表示を完成しなさい。塗りつぶしは分かる程度でよい。線幅は 10pt 以外の場合に問わないので線画でよい。色鉛筆を忘れた場合は注意書きで色を指定してください。

番号	スタイル	表示
例	border: dashed; padding: 10pt;	例文です。例文です。例文です。
	border: 10pt solid;	例文です。例文です。例文です。
	border: solid green;	例文です。例文です。例文です。
	padding: 10pt 0pt; border: solid blue;	例文です。例文です。例文です。
	border: 10pt red;	例文です。例文です。例文です。
	border: solid; border-color: blue red green yellow;	例文です。例文です。例文です。
	border: solid red; border-top-color: blue;	例文です。例文です。例文です。
	border-style: dashed solid; border-color: blue red green; padding: 10pt;	例文です。例文です。例文です。
	border-style: dashed solid solid; border-color: blue red; border-bottom-color: green; padding: 0pt 10pt; border-width: 10pt 2pt;	例文です。例文です。例文です。

DTD の内容モデル (20 点)

次の DTD の内容モデルに合わせてそれぞれ三つの典型的な具体例を作りなさい。内容が空の場合は「空」と書きなさい。三つの具体例がなければ、ないところに「-」と書きなさい。可能な限り空の要素を使ってよい。

番号	内容モデル	具体例 1	具体例 2	具体例 3
例	(abc?)	空	<abc/>	-
	(abc+)	<abc/>	<abc/><abc/>	<abc/><abc/><abc/>
	(abc*)	空	<abc/>	<abc/><abc/>
	(abc|def)	<abc/>	<def/>	-
	(abc|def|ghi)	<abc/>	<def/>	<ghi/>
	(ab,de)	<ab/><de/>	-	-
	(#PCDATA)	some text	some more text	some other text
	(#PCDATA,ab)*	<ab/>	text text text	text <ab/> text
	(ab,cd)*	空	<ab/><cd/>	<ab/><cd/><ab/><cd/>
	(ab|cd)+	<ab/>	<cd/>	<cd/><ab/>
	((ab,cd)|(cd,ab))	<ab/><cd/>	<cd/><ab/>	-

SVG による表示 (20 点)

次の SVG で定義される図形を下の方眼図に書き込みなさい。原点は左上で、一升の長さは縦横とも 20 である。塗りつぶしは分かる程度でよい。id が「thick」の部品以外には線幅を問わないので線画でよい。色鉛筆を忘れた場合は注意書きで色を指定してください。 解答例

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg xmlns='http://www.w3.org/2000/svg'
    xmlns:xlink='http://www.w3.org/1999/xlink'
    version='1.1' width='400' height='400'>
  <title>Happy SVG!</title>
  <text font-size='40' x='100' y='60'>Happy SVG!</text>
  <rect x='20' y='80' height='120' width='40' />
  <circle cx='80' cy='140' r='20' fill='red'/>
  <polygon points='100 60 200 160 100 160' fill='yellow'/>
  <line x1='20' y2='230' y1='230' x2='500'
    stroke='green' stroke-width='3'/>
  <rect style='fill: white; stroke: black; stroke-width: 3'
    x='40' y='180' width='60' height='120' />
  <ellipse cx='300' cy='300' rx='100' ry='40'
    fill='none' stroke='red' stroke-width='3'/>
  <rect id='thick' style='fill: none; stroke: blue; stroke-width: 40'
    x='300' y='100' width='60' height='60' />
  <rect id='block' x='80' y='340' height='40' width='80' />
  <use transform='rotate(90 160 340)' xlink:href='#block'/>
  <use transform='translate(180 -60)' xlink:href='#block'/>
</svg>

SVG のアニメーション (16 点)

SVG では選言的なアニメーションが可能。幾つかの要素、属性、属性値が使われている。 次の項目で種類を記述し、意味を説明しなさい。

例: from: 属性
アニメーションで変化する属性値・特性値の最初の値

to: 属性
アニメーションで変化する属性値・特性値の最後の値

indefinite: 属性値
属性 repeatCount で「永遠と繰り返す」と指定

begin: 属性
アニメーションがいつ始まらかを指定。体は普通秒。ロード、更新の時点から計られる。

attributeName: 属性
アニメーションで変化されたい属性の名前を指定

animateTransform: 要素
拡大縮小・回転・移動などのアニメーションに使われる。

dur: 属性
アニメーション (一回分) の長さを示す。単位は普通秒。duration の略。

freeze: 属性値
fill 属性で使用。終了後に終了状態に留まる (元に戻らない)

animateColor: 要素
色のアニメーションで変化させるときに使用

授業についての意見 (5 点)

授業についての意見を書いてください (内容の詳細にかかわらず何か書いたら 5 点)。