ネットワークリテラシー

　ネットワークリテラシー授業で演習を進めるためのサポートページです。
  1. タイプ練習
  2. インターネットのしくみ
  3. インターネットのプライバシーとセキュリティ
  4. 電子メールによるコミュニケーション
  5. Webページのしくみと閲覧
  6. Webページでの情報収集
  7. Webページの評価
  8. HTMLタグの基本Webページ作成
  9. スタイルシートの使用例
  10. Webページ作成演習
  11. JavaScriptの使用例
  12. CGIの使用例
  13. Webページのデザイン
  14. チェックリスト・ワークシート

　◆演習◆とあるところが実際に演習する部分です。 必要に応じてテキスト「インターネット講座」を参照してください。 必ずしもこのページの演習を順に行うわけではないので， 教員の指示に従って演習を進めてください。

　インターネットは、世界中のコンピュータをネットワークで接続したものです。 文字ばかりでなく、絵やイメージを扱うマルチメディアの技術とネットワークの技術が合わさり、情報を扱う新しい使い道を開きました。この新しい道の特徴は、 にあります。 具体的には、インターネットを介して下のようなことができます。 　このような情報環境の中で大学生である皆さんには、分散された「知」を探り出し、自らもそこに参画して知的活動を行うことが求められます。
　この講座では、インターネットによる情報交換、情報収集、情報発信に関連する知識、技術を演習し、 問題点を考察・議論していきます。

mascot タイプ練習

mascotインターネットのしくみ

mascotインターネットのプライバシーとセキュリティ

インターネットを使ってコミュニケーションをとるあるいは情報を発信する際には、必ずしも本名を名のる必要はありません。 故意に本名を隠して発言することもできます。
ただし，「匿名」といっても，あなたのアクセスの記録は多くの場合， コンピュータに記録されています。

◆演習◆　匿名で発言することのプラス面、マイナス面を考えてください。(テキスト19ページ) 情報処理学会誌リレーエッセーに参考になる議論がありますので、適宜参照してください。

mascot電子メールによるコミュニケーション

mascotWebページのしくみと閲覧

mascotWebページでの情報収集

mascotWebページの評価

Webページには、情報伝達、娯楽、宣伝/広報などさまざまな目的があります。 Webページを情報(事実、調査、研究結果など)提供の手段としてみる時その目的に合ったWebページはどのようなものなのかを考えます。
Webページを批判的に読み、評価するために、チェックリストを作成しました。

◆演習◆　下のページを読み、配布するチェックリストを使って、評価してください。

mascotHTMLタグの基本

さて、情報を発信する立場側に回りましょう。そのために必要なHTMLの基本タグについて学びます。

◆演習◆　例として「私の住む街」を紹介するページを作成します。 次のような手順で進めます。
テキスト6章に従い、順にタグを演習していきます。下はHTML文書のサンプルです。

  1. HTML文書の枠組み、改行、見出し
  2. 段落、引用
  3. 論理スタイルタグ
  4. リスト
  5. 定義リスト
  6. イメージの張り付け
  7. 別ファイルへのリンク
  8. 同一ファイルへのリンク
  9. 他のサーバへのリンク
  10. テーブル
  11. 色の指定と横罫線
  12. テーブルを使ったナビゲーションバー

HTML文書を作成するにあたり、参照したり、利用できるページがインターネッ ト上にたくさんあります。下にそのいくつかを紹介しておきます。

Web技術全般の説明(とほほのWWW入門)
http://pzxa85.hp.infoseek.co.jp/www/www.htm

制作用素材集…G-Tool
http://www.siliconcafe.com/gtool/data/index.html

色のサンプル(Webセーフカラーとカラーネーム)
http://www.htmq.com/color/

HTMLの規格文書
HTML 4.01 Specification(W3C Recommendation):
http://www.w3.org/TR/REC-html40/

HTML Validation Service(HTML文法チェッカ)
http://validator.w3.org/

Page Author Guidelines
http://www.w3c.org/TR/WD-WAI-PAGEAUTH

BMP形式とJPEG形式の変換ツール
http://www.vector.co.jp/soft/win95/art/se110485.html

JavaScriptの書き方
http://www-im.dwc.doshisha.ac.jp/~ariga/workshop/kiso.html

mascot スタイルシートの使用例

スタイルシートは、文字や背景の色、文字サイズや字体、字下げなどを指定するものです。
Webページの編集デザインを思い通りにするため、論理的な要素を体裁の指定に使うなど、「文書の構成要素を指定する」という本来のHTML言語の性質とは違う使い方がなされてきました。論理要素と体裁を分離するというHTML言語のあり方を維持しつつ、ページの編集デザインを細かく指定するために、スタイルシートが考案されました。

  1. スタイルタグ、属性を使った色の指定
  2. スタイル属性を使った背景画像の貼付け
  3. クラス指定を使った色の指定

スタイルシートの説明資料
http://www-im.dwc.doshisha.ac.jp/~ariga/stylesheet.html

mascotWebページの制作演習

HTMLタグを使って，決められたWebページを制作する演習を行います．

◆演習◆ 　次のページに演習の説明がありますので，それに従って進めてください．

mascotJavaScriptの使用例

JavaScriptは、対話的なWebページを制作するための技術のひとつです。ページに動きをもたせたり、ユーザ(ページの読者)からの入力(マウスの操作やキー入力)に対し、Webページに何らかの応答をさせるのに使います。

  1. JavaScriptを使った色の指定
  2. マウス移動による画像の変化(JavaScript)
  3. 入力に応じた計算(JavaScript)

JavaScriptのワークショップ
http://www-im.dwc.doshisha.ac.jp/~ariga/workshop/kiso.html

mascotCGIの使用例

CGI(Common Gateway Interface)は、ブラウザとWebサーバとの間でデータのやりとりをするしくみです。両方向にデータをやりとりできるので、Webページ上で読者がした入力(キーボード入力やマウスによる選択)を使って、読者との間で対話的(インターラクティブ)な機能を実現することができます。 Webサーバ上に読者からのデータを処理するためのプログラムを用意しておきます。 ブラウザ上で読者から得たデータはWWWサーバ上のプログラムへ渡されます。 プログラムはその値を使って処理を行い、結果をブラウザへ返し、 ブラウザはそれを表示します。このようにブラウザとWebサーバの間で、 データのやりとりをおこないます。もちろん、読者からのデータを使わず、 プログラムが実行結果を返すだけのCGIプログラムもあります。

  1. 時間による画像の変化(CGI)
  2. テキストフィールドからの入力への応答(CGI)
  3. ラジオボタンからの入力への応答(CGI)
  4. 日本語の入力(CGI)

mascotWebページのデザイン

Webページをデザインの観点から評価してみます。 ここでは情報提供を目的としたWebページのユーザインターフェースには、どのようなデザインが要求されるか、そのボトムラインを考えます。
Webページのユーザインターフェースを評価するために、チェックリストを作成しました。

◆演習◆ 　下のいずれかのページを読み、配布するチェックリストを使って、評価してください。

mascotチェックリスト・ワークシート

授業で使用するチェックリスト・ワークシートは，必要に応じて授業中に配布しますが，下からPDFファイルとして得ることもできます。
タイプ練習  |   しくみ  |   プライバシー  |   電子メール  |   Webのしくみ  |   Webでの情報収集  |   Webページの評価  |   HTMLタグ  |   スタイルシート  |   Webページ作成演習  |   JavaScript  |   CGI  |   Webページのデザイン  |   チェックリスト・ワークシート  |   ページトップ  |  

Produced by Ariga Taeko <arigat アットマークacm.org>
Copyright(C) 2002-2005 Ariga Taeko All rights reserved
Last modified: April 7 2012