プログラミング基礎 I

第十一回 (2006年 7月 3日)

XHTML の表、SVG の基礎

http://www.sw.it.aoyama.ac.jp/2006/PB1/lecture11.html

Martin J. Dürst

duerst@it.aoyama.ac.jp, O 棟 529号室

AGU

© 2006 Martin J. Dürst 青山学院大学

目次

これからの予定

来週二回の授業:

  1. 7月10日 (月曜日) 3限
  2. 7月11日 (火曜日) 5限 (補講)

期末試験: 7月18日から7月31日まで、60分間

全体のスケジュール

先週の宿題: 本格的な Web ページの拡張

今まで作った Web ページに今日習った要素などを追加してもっと充実なものにして下さい。

スタイルシートも合わせて拡張してください。

アップロードの都合のため、内部スタイルシートを使い、リンクは絶対 URI にして下さい。

授業中の他の学生に見せてもいい内容にしてください。

7月 2日 (日曜日) の 23:55 までに Moodle に投稿。

先週のまとめ

XHTML の表の単純な例

<table>
  <caption>This is a table</caption>
  <tbody>
    <tr><th>青学キャンパス</th><th>青山</th><th>相模原</th></tr>
    <tr><th>最寄りの駅</th><td>表参道</td><td>淵野辺</td></tr>
    <tr><th>歩行</th><td>5分</td><td>10分</td></tr>
    <tr><th>住所</th><td>東京都渋谷区渋谷</td><td>神奈川県相模原市淵野辺</td></tr>
  </tbody>
</table>

表の主な要素

表の活用と悪用

活用
表の構造をしているデータの記述
悪用
Web ページの内容の配置

参考のため: Throwing Tables Out the Window (日本語)

Web ページの内容の配置に使える CSS

SVG の例

パンダの顔 (のつもり)

パンダの顔

SVG の名前

ベクトル対ラスタ

(CSS で floatclear でページを配置する例でもある)

パンダの顔の図 (ベクトル)

パンダの顔の絵 (ラスタ)

ベクタとラスタの比較
  ベクトル (左) ラスタ (右)
指定方法 座標 (x,y) 画素 (pixel, ピクセル)
理想な応用 写真
拡大すると 綺麗のまま どんどん粗くなる
ファイルの大きさ 小さい、図の複雑さによる 大きい、画素数と圧縮による

 

SVG 用のインストール

SVG 文書の外枠

<?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='200px' height='200px'>
    <title>This is a test of SVG</title>
</svg>

SVG の座標系

SVG の基本形

SVG の仕様書 (日本語)

SVG の簡単なスタイルの特性

SVG のスタイル付け

演習 1: 簡単な SVG の図

長方形、円、楕円などを使って簡単な SVG の図を作って下さい。

図に意味は必要ない。提出不要。

演習 2: 面白い SVG の図

長方形、円、楕円などを使って面白い SVG の図を作って下さい。

簡単でもいいですが、何か意味のあるものを作って下さい。

授業中の他の学生に見せてもいい内容にしてください。

7月 9日 (日曜日) の 23:55 までに Moodle に投稿。