県立広島大学 全学共通教育科目 情報処理入門　第14回 2012年7月23日 県立広島大学 経営情報学部経営情報学科 准教授　小川　仁士.

Presentation on theme: "県立広島大学 全学共通教育科目 情報処理入門　第14回 2012年7月23日 県立広島大学 経営情報学部経営情報学科 准教授　小川　仁士."— Presentation transcript:

1 県立広島大学 全学共通教育科目 情報処理入門　第14回 2012年7月23日 県立広島大学 経営情報学部経営情報学科 准教授　小川　仁士

2 目 次 ★ 第１４回 講義ノート 1. 情報活用力テキスト Section7 インターネット コミュニケーションⅠ
目　次 ★　第１４回　講義ノート 　1.　情報活用力テキスト　Section7　インターネット コミュニケーションⅠ STEP1　インターネットを活用したコミュニケーション STEP2　メールコミュニケーション STEP3　ルールやマナーの原則 　2.　HTMLによるホームページ作成演習第3回 表組み，フレームを記述するタグ ★　第１４回　課題

3 インターネットコミュニケーションⅠ セクションの目的
メールや掲示板など，インターネット上で他者とコミュニケーションを取るスキルの習得を目的とする。 インターネットの活用方法はSection1で学習した情報収集だけではない コミュニケーション（情報伝達，情報交換）の手段としてもインターネットは活用されている メールや掲示板は日常的に使用されているコミュニケーションの手段である インターネット上でのコミュニケーションにおいては，他者の気持ちを想像することが大切

4 インターネットコミュニケーションⅠ 学習目標 STEP1 インターネットを活用したコミュニケーション STEP2 メールコミュニケーション
インターネットを介した，さまざまなコミュニケーションツールについて理解する 各種コミュニケーションツールの特徴について確認する STEP2　メールコミュニケーション メールを使ったコミュニケーションの特徴について理解する メールのルールとマナーを理解する シチュエーションや目的に応じて，ルールやマナーを踏まえたメールの作成ができる STEP3　ルールやマナーの原則 インターネット上で，他者とコミュニケーションする際のルールやマナーの原則について理解する 掲示板へ投稿する際の考え方や判断基準について理解する

5 インターネットを活用したコミュニケーション
（１）インターネットとコミュニケーション Webサイト，メール，ブログなどのコミュニケーションツールを利用する際は，その場にふさわしい振る舞いをすることが必要 （２）さまざまなコミュニケーションツール 1）直接やり取りをする メール　　　　　　　特定の相手と直接やり取りできる メッセンジャー　　接続中のユーザー同士で会話ができる 2）情報を発信する Webサイト　　　　文字情報だけでなく，画像や動画などを扱える ブログ 手軽に記事の投稿ができ，定期的な情報発信 がしやすい。閲覧者の反応を受け入れることができる

6 インターネットを活用したコミュニケーション
3）ソーシャルネットワーク SNS（Social Networking Service）・・・会員制のサービス 限られた利用者の間でのみ情報交換や情報共有ができる ミニブログ・・・気軽に日常の出来事や所感を発信できる 　　　　　　　　　ブログと違い1回の投稿に文字数制限がある 代表的なSNS　　　　　mixi，GREE，Facebookなど 代表的なミニブログ　　Twitterなど

7 メールコミュニケーション （１）メールコミュニケーションの特徴
メールはパソコンや携帯電話など，さまざまな環境で利用されるため，相手の環境・状況によってはメッセージが適切に伝わらないことがある。 メールは複数のコンピューター（サーバー）を経由して相手先に届くため，一定の約束事を守ってメールのやり取りをしなければ，正しくメッセージが伝達されない。 即時性　　　　　　　　　　送信に時間がかかる場合もある 好きなときに読める　　すぐに返事がほしいときには向かない 保存性 気軽に送信できる 画一的　　　　　　　　　　冷たい印象を与えたり，内容によって は誤解を招いたりすることがある メッセージを不用意に送信し，トラブルの原因となることもある

8 メールコミュニケーション テキストの課題を解いてみましょう。
斉藤さんが村田さんに送ったメールについて，どんなトラブルが起こるか考えてみましょう。・・・P119の課題56

9 メールコミュニケーション （２）メールのルールとマナー 入力したメールの内容は，一度見直してから送るようにする
読み手の立場にたって，分かりやすい文章を書く 読み手との関係性や立場にふさわしい文体，言葉を選ぶ メールを受け取る受信側の環境を意識する 1）件名 本文の内容を簡潔に表現した件名をつける 好ましくない件名の例 田中です 質問 提出 （無題） Thanks! 好ましい件名の例 7月定例会報告書送付 情報活用力授業の質問 レポート提出_田中 テキストお問い合わせについて 【要返信】交流会のお知らせ

10 メールコミュニケーション テキストの課題を解いてみましょう。
紺野さんが作成したメールの件名として適切なものはどれか，考えてみましょう。・・・P121の課題57

11 メールコミュニケーション 2）宛先 「宛先（To）」，「CC」，「BCC」を用いることができる
それぞれ複数のメールアドレスを指定することができる 宛先とCCに指定されたメールアドレスには，他の人のメールアドレスが相互に通知される（送信者が送信したメールの本文だけでなく，互いのメールアドレスが分かってしまう） BCCに指定されたメールアドレスは，他の受信者に通知されない（互いのメールアドレスが分からないように送信できる反面，受信者は自分が受信したことを，他の受信者に知られてはならない） 宛先（To） 内容を伝えたい相手，返信が必要な相手 CC 直接は担当しないが内容に目を通しておいてもらいたい相手，特に返信を必要としない相手 BCC 宛先，CCの人からはBCCの情報が通知されない

12 メールコミュニケーション テキストの課題を解いてみましょう。
高橋さんが作成したメールについて，サークル顧問の阿部先生とサークル部長の藤本さんのアドレスは，「宛先（To）」，「CC」，「BCC」のうち，どの欄に入力するのがよいか，考えてみましょう。・・・P122の課題58

13 メールコミュニケーション 3）本文 分かりやすく丁寧に 使用できない文字 大切な情報を安易にメールに書かない
誰が誰に送ったのかを本文中に明示する 挨拶などは簡潔かつ丁寧に 最大35文字程度で適宜改行する 用件は簡潔かつ具体的に 署名を付ける 使用できない文字 機種依存文字・・・詳細はP124の解説を参照 半角カタカナ，半角の句読点，半角のかぎ括弧 大切な情報を安易にメールに書かない クレジットカード番号 銀行のキャッシュカードの暗証番号 パスワード

14 メールコミュニケーション テキストの課題を解いてみましょう。 １）田中さんのメールをふさわしいものに修正しましょう。
　　・・・P125の課題59 ２）光井さんのメールをふさわしいものに修正しましょう。 　　・・・P125の課題60

15 メールコミュニケーション 4）添付ファイル メール本文に記載できない情報を添付ファイルとして送信 添付ファイルを送受信する際の注意事項
ワープロや表計算ソフトで作成したファイル 画像，音声，動画など 秘密にしたい内容をパスワード付きファイルにして 添付ファイルを送受信する際の注意事項 添付されたファイルにウイルスが混入している場合がある メールのサイズが大きくなる 添付したファイルを開くためのアプリケーションを相手が持っていない場合がある ある程度大きな添付ファイルを送るときには，下記の配慮が必要 ファイルを圧縮するなどして，ファイルサイズをなるべく小さくする あらかじめ相手と連絡をとって，送信してよいかどうか確認する

16 メールコミュニケーション テキストの課題を解いてみましょう。
フォルダー『送付資料』の中にあるファイルを，テキストに記載された条件のもと，メールに添付して送信してみましょう。・・・P126の課題61 　　　（フォルダー『送付資料』は配布用フォルダにある）

17 メールコミュニケーション 5）返信機能 受信したメールに対して「返信」する 件名 引用
「宛先」・・・送信元のアドレスが追加される（必ず確認） 「件名」・・・元のメールの件名に「Re:」を付けてコピーされる 「本文」・・・元のメールの本文が引用される 件名 そのまま利用したり，新たに付けたりすることができる 引用 元のメールをすべて引用したり，必要な部分だけ残したりすることができる

18 メールコミュニケーション テキストの課題を解いてみましょう。 １）テキストのメールに返信してみましょう。 ・・・P128の課題62
２）高橋さんのメールは，適切な内容になっているでしょうか。修正が必要な場合は，どのように修正すればよいか，考えてみましょう。 　　・・・P129の課題63 ３）村田さんのメールは，適切な内容になっているでしょうか。修正が必要な場合は，どのように修正すればよいか，考えてみましょう。 　　・・・P130の課題64

19 ルールやマナーの原則 （１）インターネットコミュニケーションの基本 1）誰とどんなやり取りをするのか考える 2）相手の立場にたって考える
どのようなコミュニケーションがしたいのか 誰とコミュニケーションをとるべきか どんなコミュニケーションツールを使うのか 2）相手の立場にたって考える ツール/コミュニティのルールを守る 送信前に読み返す 個人情報が含まれていないか インターネットコミュニケーションの例・・・P133,134の例題22

20 ルールやマナーの原則 テキストの課題を解いてみましょう。
１）テキストの掲示板のやり取りを見て，問題のある投稿がないか，考えてみましょう。・・・P135の課題65 ２）テキストの掲示板のやり取りを見て，No.4の投稿の問題点について考えてみましょう。・・・P136の課題66

21 HTMLによるホームページ作成演習第3回 今日演習するタグ 表組み（テーブル）を表現するタグ 参考：フレーム

22 サイズは表、セルごとに、縦、横の指定が可能
HTMLによるホームページ作成演習第3回 表組み（テーブル）の作成でできること タイトルの設定 セルの横方向の結合 学園の風景 見出しの設定 種　類 写真へのリンク 　風景 建物 本館、図書館、講堂 造形 彫像、タワー 行揃え セルを縦方向に結合可能 外枠の 太さ指定 セルの内容は文字、リンク、画像を扱える サイズは表、セルごとに、縦、横の指定が可能

23 HTMLによるホームページ作成演習第3回 表組み（テーブル）に用いるタグ <table>
表組み全体 　<table> <caption>　タイトル　</caption>　　　　　　　　 　 <tr> <th>　見出しセル　</th>　・・・　</tr>　 　 <tr> <td>　セルの内容　</td>　・・・　</tr>　 　　　　　　　・ 　</table> 表題 表組 行 見出しセル セル

24 HTMLによるホームページ作成演習第3回 表組み（テーブル）に用いるタグ <table>
表組みとして表現する部分を<table>と</table>で囲む <tr> 表の中の一つの行を指定する <td> 行の中の一つのセルを指定する テキストエディタで「index.html」を開き、 HTMLファイル作成例３.pdfを見ながら編集を加える ブラウザで確認する

25 HTMLによるホームページ作成演習第3回 表組み（テーブル）に用いるタグ <table border=“幅”>
テキストエディタで「index.html」を開き、 HTMLファイル作成例３.pdfを見ながら編集を加える ブラウザで確認する

26 HTMLによるホームページ作成演習第3回 表組み（テーブル）に用いるタグ <th> 見出し用のセルを指定する
テキストエディタで「index.html」を開き、 HTMLファイル作成例３.pdfを見ながら編集を加える ブラウザで確認する

27 HTMLによるホームページ作成演習第3回 表組み（テーブル）に用いるタグ <caption> 表に説明文をつける
テキストエディタで「index.html」を開き、 HTMLファイル作成例３.pdfを見ながら編集を加える ブラウザで確認する

28 HTMLによるホームページ作成演習第3回 表組み（テーブル）に用いるタグ colspan
<td>、<th>タグのオプションとして使用され、セルの横方向への結合を表わす。指定した数のセルが横方向で結合される rowspan <td>、<th>タグのオプションとして使用され、セルの縦方向への結合を表わす。指定した数のセルが縦方向に結合される

29 HTMLによるホームページ作成演習第3回 セルの横方向の結合の設定例 <table border="1">
<caption>学園の風景</caption> <tr> <th colspan="2">種類</th> <th>写真へのリンク</th></tr> <tr> <td>風景</td> <td>建物</td> <td>本館、図書館、講堂</td></tr> <td>造形</td> <td>彫像、タワー</td></tr> </table> 配布用フォルダから「index-colspan.html」を作業フォルダへコピーする ブラウザで表示し、ソースと見比べて確認する

30 HTMLによるホームページ作成演習第3回 セルの縦方向の結合の設定例 <table border="1">
<caption>学園の風景</caption> <tr> <th colspan="2">種類</th> <th>写真へのリンク</th></tr> <tr> <td rowspan="2">風景</td> <td>建物</td> <td>本館、図書館、講堂</td></tr> <tr> <td>造形</td> <td>彫像、タワー</td></tr> </table> 配布用フォルダから「index-rowspan.html」を作業フォルダへコピーする ブラウザで表示し、ソースと見比べて確認する

31 HTMLによるホームページ作成演習第3回 写真 フレームとは 分割したそれぞれのフレームに対応するファイルと、その分割
　学園の風景目次 　１．学園の建物 　２．モニュメント 　３．講義室の様子 　４．クラブ活動 　　　　　　　・ １．学園の建物 　　（文章） 写真 縦、横、幾つにも分割が可能 分割したそれぞれのフレームに対応するファイルと、その分割 方法（フレーム）を定義したファイルを用意する

32 HTMLによるホームページ作成演習第3回 File ①：frame.html Main page 写真 File ③：gakuen.html
　学園の風景目次 　１．学園の建物 　２．モニュメント 　３．講義室の様子 　４．クラブ活動 　　　　　　　・ １．学園の建物 　　（文章） Main page 写真 File ③：gakuen.html File ④：monument.html File ②：contents.html ・・・

33 右側のページにmainという名前を付ける
HTMLによるホームページ作成演習第3回 フレームの定義 Frameset と指定する <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <title>左右２分割のページ</title> </head> <frameset cols="30%,70%" title="学園紹介"> <frame src="contents.html" title="目次"> <frame src="gakuen.html" name="main" title="学園の建物"> </frameset> </html> 右側のページにmainという名前を付ける <frameset cols="30%,70%">という指定で、左側の表示幅30%,右側70%という割合の表示になる frame.html というファイル名を付けて保存する

34 contents.html というファイル名を付けて保存する
目次用のホームページ作成 右側のmainページに本文を表示する <html> <head> <title>目次</title> </head> <body> <h1>目次</h1> <ol> <li><a href="gakuen.html" target="main">学園の建物</a> <li><a href="monument.html" target="main">モニュメント</a> </ol> <a href=" target="top"> 　　　　　　　　　県立広島大学HomePageへ</a> </body> </html> contents.html　というファイル名を付けて保存する

35 HTMLによるホームページ作成演習第3回 スクロールバーの表示
　目次が一画面に収まらない場合には、スクロールバーを表示し、スクロールしながら見れるようにする。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <title>左右２分割のページ</title> </head> <frameset cols="30%,70%" title="学園紹介"> <frame src="contents.html" title="目次" scrolling="yes"> <frame src="gakuen.html" name="main" title="学園の建物"> ・・・中略・・・ </frameset> </html>

36 HTMLによるホームページ作成演習第3回 フレームの境界線を消す
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <title>左右２分割のページ</title> </head> <frameset cols="30%,70%" title="学園紹介" frameborder="0"> <frame src="contents.html" title="目次" scrolling="yes"> <frame src="gakuen.html"name="main" title="学園の建物"> </frameset> </html>

37 第14回 演習課題 HTML作成練習（3） ■ 「架空の自己紹介」をホームページにしてみる（続き）
第14回　演習課題 HTML作成練習（3） ■　「架空の自己紹介」をホームページにしてみる（続き） 　　　自己紹介のホームページをグレードアップし、次回の授業の始まりまでに提出する。 完成したｈｔｍｌファイル等は専用フォルダ（ q201099xx ）内にまとめ、サブフォルダごとＹドライブの提出用フォルダへコピーして提出する。（クラスを間違えないように） 　　（ファイル名は、ユーザIDで区別する） 例：ｈｔｍｌファイル名　Q201099XX-HTML3.html 　　（メインページからリンクを張った画像ファイル等のファイル名は半角英数字の文字列であれば好きに名付けてよい） 今日紹介したタグを最大限に活用すること！

38 情報処理入門 第14回 終　了