普通教科「情報」における WWW 情報発信教育の位置付け
久野靖∗

1999.7.28

1

はじめに(reference)□ 普通教科「情報」
HTML• 情報 A --- 情報活動の実践力• 情報 B --- 情報の科学的理解(multiplepresentation)• 情報 C --- 情報社会に参画する態度(language)

Video(multimedia)
Sound□ 特に A と C →「生きた」ネットワーク/情報に接して学ぶことが不可欠

3□ WWW は「生きた」ネットワーク/情報の素材として魅力的

WWW を素材とする際の注意点□ 「使い方」に熱中しすぎてしまう• →長所を活かし弱点を克服するようなカリキュラム
構成の提案• ×ポスターコンテスト/美術作品 (美術作品が目的の授業ならいいが…)• → (その一部を) 実施した体験の報告□ 情報発信には覚悟が必要• ×内容は何でもとにかく発信 (無責任な情報発信の訓練???)The Internet□ 内容を重視し、発信する以上は責任を持たせるべき
Contents

2 「情報」素材としての WWW の長所

publishng□ 「情報を見る」点から• 「生きた情報」が見聞できる• ほぼあらゆる題材の情報が存在4• ブラックボックスでない

WWW を扱う際に望まれる方針□ 動機は「Web ページを作る」ことより「情報発信する」□ 「情報を出す」点からこと• マルチメディアである• ←見る時も「何を意図して発信しているか」考える
ことに対応• 論理構造と表現の分離を体現• HTML は「言語」の実例□ 「適切な内容」と「不適切な内容」を対にして具体的に• 「参照」を学ぶ題材扱う• ←抽象的な列挙では分かってもらえない□ 「内容=HTML」と「表現=CSS」を対にして扱う∗ 筑波大学大学院経営システム科学専攻1• ←「情報」「メディア論」を具体的に扱える

7□ 「WYSIWYG」と「マークアップ」を対比させる□ 内容構成:• ←「見えないが重要な情報」を体験してもらう
OK

HTMLWYSI
WYG

NGCSS

Mark
Up

第 1 回: WWW ページ作成入門• WWW ページの「面白さ」として何があるかを考えてみる• 「内容の面白さ」と「表現の面白さ」を区別して考える• 自分で WWW の情報発信を行う際の目標を考えておく

5• WWW ページの内容はどのように記述されているかを

WWW を 扱 う 際 に 望 ま れ る 方 針(cont.)

見てみる• 「HTML で記述するとブラウザで整形され表示される」
ことを知る□ 多様性に対する配慮を扱う• 具体的な HTML 記述の意味とマークアップの概念を学ぶ• ←ハンディキャップだけでなく環境の違いも• この方式をワープロ等の WYSIWYG と比較して得失を□ プレゼンテーションの構造を考える

考える• ←文章の構造を明示的に表す体験• 「HTML 記述に CSS 指定を追加して表現を指定できる」ことを学ぶ□ 標準規格について学ぶ• 1 つの内容 (コンテンツ) にさまざまな表現が指定できることを見る• ←共通仕様を定めてそれを守ることは重要• ←中途半端に繁雑さを回避しない• どのような表現にどのような得失があるかを考える

structure

8Variation

第 1 回:

WWW ページ作成入門(cont.)

standard□ 実習:

6• HTML による記述を打ち込み保存しブラウザで表示してみる

WWW 情報発信のカリキュラム案□ 3 回 (各回 50 分× 2 コマ) ぶん• 記述を追加したり変更すると表示も変化することを体験する• 情報 A「情報の発信と共有に適した情報の表し方」• CSS による記述を付加することで表現を変更してみる• 情報 C「情報通信ネットワークを活用した情報の収集・発信」□ 解説:□ 以下の内容は終っていることを前提:• 目標→ WWW ページが作れるように+情報発信の内容+表現と内容の区別• WWW のブラウジング、検索• ワープロソフト、タッチタイピング• HTML を詳しく学ぶことはしない→タグとしては
html、head、titile、body、h1、p、ul、li の 8 つ• お絵描き、画像の扱い

程度

browsing
searching• CSS の指定→ color など簡単なものをまず実習、あとは資料配布

word processor
touch typing
paint/draw
image

Web
publishing2

9

第 2 回: リンクとハイパーテキスト• 自分で情報発信する場合の基準や指針を考える• 発信した情報に対する反応を受け取る方法について考える□ 内容構成:• HTML ファイルから別のものを「参照する」という概念を学ぶ• 継続的に自分のページをメンテナンスする責任について考える• 「参照する」他の事例、利点と欠点について考える• WWW による情報発信のメカニズム (サーバとクライアントの関係) を学ぶ• 参照する際に必要な情報 (リンクテキストと URL) を確認する• サーバに自分のプレゼンテーションを設置する方法
を学ぶ• HTML のリンク機能と a タグについて学ぶ• イメージの埋め込み/リンク/背景という 3 用途について学ぶ12• 3 用途の指定方法 (img、a、bacground-image:) を

第 3 回: WWW による情報発信

□ 実習:

学ぶ

• 複数ページから成るプレゼンテーションの構造を考える• 良い/悪いページのサンプルを見て検討してみる/事例を学ぶ• リンクを用いてプレゼンテーションの構造を実現する• 自分のプレゼンテーションをサーバに設置する• 互いに他人のプレゼンテーションを見てメールでコ10

メントする

第 2 回: リンクとハイパーテキスト• 他人からのコメントを整理してプレゼンテーションに追加する(cont.)
□ 実習:

□ 解説:

• HTML 記述に他ページへのリンクを追加してみる• 目標→実際に WWW で情報発信を行うときに、知って• HTML 記述にイメージの利用を追加してみる

おくべきこと、考えておくべきことについてひとと• 自分のホームページを作り既に作ったページ群を参おり学ぶ

照する• 技術的なこと+世界中に情報発信することの責任と自覚+ 他人からの意見を受け入れる準備□ 解説:• 良い内容/悪い内容→具体的なページを題材、自ら検• 目標→外部の資源を参照できる+参照の意味、引用との対比

討する訓練を• 新たに学ぶ HTML や CSS の指定はない• 埋め込みイメージ→ページは 1 つでも内容は複数、その理由

13• 新 し い HTML 記 述 は a と img の み (CSS で はbackground-image:指定のみ)

11

東京学芸大学附属高校における実施
経験□ 東京学芸大学附属高校

第 3 回: WWW による情報発信• 〜1998 年度→さまざまな形で情報教育を先取り試行□ 内容構成:• 1999 年度→ 1 年生*全員*を対象に*必修*で*正規の科目*として「情報」を実施• WWW で情報発信するとは世界中に情報を公開するこ• 時間数は毎週 1 コマ (50 分) ×通年とだと確認• どのような内容は発信すべきでないか考える□ 1 学期の第 6 週と第 8 週を用いて上記内容の抜粋したも• さまざまなページの例を見てよくない点を考えるのを実施

3

• 第 7 週が「お絵描きと画像の扱い」(附属高校実施)• イメージ (画像の使用方法)• 42〜43 名× 8 クラスのうち 7 クラス (4:久野、2:辰己、1:附属高校)• 外部イメージ、埋め込みイメージ、背景イメージの指定方法
□ 実習:

14

第 1 回の内容:• 自分のページにリンクとイメージを追加

□ 講義:

17

• WWW ページに関する用語• WWW ページの「面白さ」について□ 第 1 回の反省に立って、かなり内容を精選した• WWW ページは HTML で記述されている• 基本のタグ:• 第 1 回でページの公開ができていない生徒への対処

html、head、body、title、h1• 内容のためのタグ:

第 2 回の授業経験• 間の週でイメージが用意できてきない生徒への対処

p、ul、li• CSS による表現の指定□ その後の内容:□ 実習:• 「案」の第 2 回から「参照」に関する部分を削除• 代わりに「案」の第 3 回から情報発信の責任、発信• ページを打ち込んで表示させてみるすべきでないことがらの 2 件を追加

• 「自分の好きなページ」というテーマでページを作成• 実習はリンクとイメージを使ってみることに絞った• 作成したページを public html フォルダに入れて公開する

1815

第 1 回の授業経験

第 2 回の授業経験 (cont.)□ リンクのつけ方→「とにかくここへ」vs「リンク先も自分で探す」□ 基本的な問題→内容が多い• →どちらも 1 長 1 短だがリンク先を探した方が長い目ではよい (後で自分で使いこなせるようになる)• 「案」の第 1 回+αなのに時間は半分しかない• 附属高校の希望、筆者らの希望□ イメージファイル→画像そのものの作成に熱中されてし• 結果論から言えばもっと我慢すべきだった

まいがち□ その他の問題点• →画像そのものは十分「終った」状態にしておく必要• キーボードに不慣れ←ワープロ、タッチタイプをま□ 「どのようなページはまずいか?」をクイズ形式でだやってない• 実習機材が 2 人に 1 台しかない• →反応としてはとてもよい (アンケート結果でもそうなっている)□ 成果としては「公開できた人もできない人もいる」状態

1619

第 2 回の内容

アンケート結果とその検討□ 2 回目の授業の終了直後にアンケート調査□ 講義:• 質問は 38 項目あり、それぞれに○ (納得した、理解した)、× (分からなかった)、△ (自信はないがなん• 第 1 回の「補習」• WWW ページを公開することの意味となく分かる) のいずれかを記入• 発信すべきでない/注意すべき内容• 各項目ごとに○を 2 点、△を 1 点、×および無効回• リンクの概念と a タグによるリンクの指定

答を 0 点として集計

4• 本稿では 3 回分としたが 1 回目と 2 回目の間に「遊んでみる回」がよい?

□ 結果 (理解のよい順)• 「ページの公開に際して注意すべきこと」に関する内容が高い点数→「こういうことを考えるべきだ」と□ 「内容重視」はやはり正しかった納得すればあとは自分でわかる?

• 1 回目は内容重視→時間が掛かる→実施する方にあ• HTML の基本的なタグや概念→○の数が×の数より優る程度の理解→ 1 回目では消化不良だったが調査ませり• 2 回目は方法重視→一応できるがアンケートをみると良くない事が分かる

での 2 週間で定着?

• CSS → 1 回目で説明したが実習内容には盛り込めな• やはり教育に「あせり」「早急に成果を求める」は禁物だと思った

かった→×の数が○と△の数を合わせたものを上回る (しかしそれなりの点数) →表現をつけたいという欲求から自発的に試した生徒多数• 2 回目の技術的内容→×の数が○と△の数を合わせ22たものを上回る (予想外) →とりあえず指示された通まとめ□ 教科「情報」で WWW ページ作成を扱う部分についてカリりに実習しただけでは未消化?

キュラムを提案20□ その一部分を実施

アンケート結果から読み取れる (と□ 本稿で提案した方針が「間違っている」ことを示唆する思う) こと

結果は出ていない (あくまで実施できた部分について)□ 「やってみて動いた」だけでは不十分←動作原理や HTMLのしくみなどが納得できていない□ A 組 (最初の組) →ある程度時間を書けて説明 (その分実習時間が少なくなった) →アンケートではよい結果□ 全体として今回の授業は「完全に成功とは言えない」が「HTML や CSS を単なる使い方だけでなく原理面まで含めて学んでもらう」という目標はある程度達成されたと考える。

21

議論□ コンテンツ重視、HTML と CSS をエディタで→しきいの高さ• 実際には「情報」を取り扱う上での重要な側面に対応• 教科「情報」が目指す多くの事柄を身につけてもらえる• これを捨てて Web ページ作成ツールだけ学ぶのではもったいない□ ただし、実施経験から見て、次のような配慮が望まれる• ゼロから打ち込みでなくひな型を使っても良かったかも? ←ただし、よく分からないひな型はよくない• 最初の段階で十分時間を掛けて遊んでもらえるとよい← HTML+CSS が整形され表示される、という感覚を持つことが重要5