• 検索結果がありません。

Web のしくみと応用 ('15) 回テーマ 1 身近なWeb 2 Webの基礎 3 ハイパーメディアとHTML 4 HTMLとCSS 5 HTTP (1) 6 HTTP (2) 7 動的なWebサイト 8 クライアントサイドの技術 回 テーマ 9 リレーショナルデータベース 10 SQL とデータ

N/A
N/A
Protected

Academic year: 2021

シェア "Web のしくみと応用 ('15) 回テーマ 1 身近なWeb 2 Webの基礎 3 ハイパーメディアとHTML 4 HTMLとCSS 5 HTTP (1) 6 HTTP (2) 7 動的なWebサイト 8 クライアントサイドの技術 回 テーマ 9 リレーショナルデータベース 10 SQL とデータ"

Copied!
78
0
0

読み込み中.... (全文を見る)

全文

(1)

Webのしくみと応用 ('15)

回 テーマ

1

身近なWeb

2

Webの基礎

3

ハイパーメディアとHTML

4

HTMLとCSS

5

HTTP (1)

6

HTTP (2)

7

動的なWebサイト

8

クライアントサイドの技術

回 テーマ

9

リレーショナルデータベース

10 SQLとデータベース管理

システム

11 認証とセッション管理

12 Webのセキュリティ

13 Webの応用 (1)

14 Webの応用 (2)

15 Webの応用 (3)

(2)

Webのしくみと応用 ('15)

回 テーマ

1

身近なWeb

2

Webの基礎

3

ハイパーメディアとHTML

4

HTMLとCSS

5

HTTP (1)

6

HTTP (2)

7

動的なWebサイト

8

クライアントサイドの技術

回 テーマ

9

リレーショナルデータベース

10 SQLとデータベース管理

システム

11 認証とセッション管理

12 Webのセキュリティ

13 Webの応用 (1)

14 Webの応用 (2)

15 Webの応用 (3)

(3)

Webのしくみと応用 ('15)

回 テーマ

1

身近なWeb

2

Webの基礎

3

ハイパーメディアとHTML

4

HTMLとCSS

5

HTTP (1)

6

HTTP (2)

7

動的なWebサイト

8

クライアントサイドの技術

回 テーマ

9

リレーショナルデータベース

10 SQLとデータベース管理

システム

11 認証とセッション管理

12 Webのセキュリティ

13 Webの応用 (1)

14 Webの応用 (2)

15 Webの応用 (3)

Webの仕組み

(4)

Webのしくみと応用 ('15)

回 テーマ

1

身近なWeb

2

Webの基礎

3

ハイパーメディアとHTML

4

HTMLとCSS

5

HTTP (1)

6

HTTP (2)

7

動的なWebサイト

8

クライアントサイドの技術

回 テーマ

9

リレーショナルデータベース

10 SQLとデータベース管理

システム

11 認証とセッション管理

12 Webのセキュリティ

13 Webの応用 (1)

14 Webの応用 (2)

15 Webの応用 (3)

Webシステムに関する技術

(5)

Webのしくみと応用 ('15)

回 テーマ

1

身近なWeb

2

Webの基礎

3

ハイパーメディアとHTML

4

HTMLとCSS

5

HTTP (1)

6

HTTP (2)

7

動的なWebサイト

8

クライアントサイドの技術

回 テーマ

9

リレーショナルデータベース

10 SQLとデータベース管理

システム

11 認証とセッション管理

12 Webのセキュリティ

13 Webの応用 (1)

14 Webの応用 (2)

15 Webの応用 (3)

Webの応用

(6)

第1回の内容

• World Wide Web

• Webシステム

(7)
(8)

インターネットとWWW

(9)

インターネットとWWW

• World Wide Web

 WWW

(10)

インターネットとWWW

• World Wide Web

 WWW, Web

• インターネット

(11)

インターネットとWWW

インターネット

Web

Webブラウザ

Webページを持つ

コンピュータ

(12)

ハイパーテキスト

ハイパー

リンク

ハイパー

リンク

ハイパーテキスト

ハイパーテキスト

ハイパーテキスト

ハイパーテキスト

(13)

ハイパーテキスト

• Webのハイパーテキスト ⋯ Webページ

• ハイパーリンクを設置 リンクを張る

(14)

Webに関する規格

• URI (URL)

• HTTP

(15)

URI (URL)

(16)

URI (URL)

• URL; Uniform Resource Locator

• URI; Uniform Resource Identifier

• URIで指し示される情報 ⋯

リソース

URL

URI

(17)

HTTP

Webブラウザ

Webサーバ

(18)

HTML

• Hypertext Markup Language

(19)

HTML

<html> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>放送太郎の自己紹介</title> </head> <body> <h1>放送太郎の自己紹介</h1> <h2>略歴</h2> <p>神奈川県横浜市出身。1983年生まれの29歳です。大学では英文学を学びました。 現在は、千葉県の<a href="http://www.ouj.ac.jp/">放送大学</a>本部で勤務しています。</p> <h2>趣味</h2> <ul> <li>読書</li> <li>オートバイ</li> <li>プラモデル製作</li> </ul>

<address>連絡先: <a href="mailto:[email protected]">[email protected]</a></address> </body>

(20)

HTML

略歴

趣味

文章 (段落)

箇条書き

(21)

HTML

<html> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>放送太郎の自己紹介</title> </head> <body> <h1>放送太郎の自己紹介</h1> <h2>略歴</h2> <p>神奈川県横浜市出身。1983年生まれの29歳です。大学では英文学を学びました。 現在は、千葉県の<a href="http://www.ouj.ac.jp/">放送大学</a>本部で勤務しています。</p> <h2>趣味</h2> <ul> <li>読書</li> <li>オートバイ</li> <li>プラモデル製作</li> </ul>

<address>連絡先: <a href="mailto:[email protected]">[email protected]</a></address> </body>

(22)

HTML

<html> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>放送太郎の自己紹介</title> </head> <body> <h1>放送太郎の自己紹介</h1> <h2>略歴</h2> <p>神奈川県横浜市出身。1983年生まれの29歳です。大学では英文学を学びました。

現在は、千葉県の<a href="http://www.ouj.ac.jp/">放送大学</a>本部で勤務しています。</p> <h2>趣味</h2> <ul> <li>読書</li> <li>オートバイ</li> <li>プラモデル製作</li> </ul>

<address>連絡先: <a href="mailto:[email protected]">[email protected]</a></address> </body>

(23)

HTML

<html> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>放送太郎の自己紹介</title> </head> <body> <h1>放送太郎の自己紹介</h1> <h2>略歴</h2> <p>神奈川県横浜市出身。1983年生まれの29歳です。大学では英文学を学びました。 現在は、千葉県の<a href="http://www.ouj.ac.jp/">放送大学</a>本部で勤務しています。</p> <h2>趣味</h2> <ul> <li>読書</li> <li>オートバイ</li> <li>プラモデル製作</li> </ul>

<address>連絡先: <a href="mailto:[email protected]">[email protected]</a></address> </body>

(24)

HTML

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>放送太郎の自己紹介</title> </head> <body> <h1>放送太郎の自己紹介</h1> <h2>略歴</h2> <p>神奈川県横浜市出身。1983年生まれの29歳です。大学では英文学を学びました。 現在は、千葉県の<a href="http://www.ouj.ac.jp/">放送大学</a>本部で勤務しています。</p> <h2>趣味</h2> <ul> <li>読書</li> <li>オートバイ</li> <li>プラモデル製作</li> </ul>

<address>連絡先: <a href="mailto:[email protected]">[email protected]</a></address>

</body> </html>

(25)

HTML

• Hypertext Markup Language

• Webページを記述するための言語

• CSS, JavaScript, 画像, ⋯

(26)

Webに関する規格

• URI (URL)

• HTTP

• HTML

第2,5,6回

第3,4回

第2回

(27)

Webの簡単な仕組み

(28)

Webの簡単な仕組み

(29)

Webの簡単な仕組み

URI

http

://www.example.ac.jp/path/to/resource

(30)

Webの簡単な仕組み

URI

⋯ http://

www.example.ac.jp

/path/to/resource

(31)

Webの簡単な仕組み

URI

⋯ http://

www.example.ac.jp

/path/to/resource

• HTTPを使って、

(32)

Webの簡単な仕組み

URI

⋯ http://www.example.ac.jp

/path/to/resource

• HTTPを使って、

(33)

Webの簡単な仕組み

URI

⋯ http://www.example.ac.jp

/path/to/resource

• HTTPを使って、

www.example.ac.jpで示されるWebサーバから、

/path/to/resourceという名前のリソースを取得

(34)

Webの簡単な仕組み

URI

⋯ http://www.example.ac.jp/path/to/resource

• HTTPを使って、

www.example.ac.jpで示されるWebサーバから、

/path/to/resourceという名前のリソースを取得

(35)

Webの簡単な仕組み

URI

⋯ http://www.example.ac.jp/path/to/resource

Webブラウザ

Webサーバ

HTTPリクエスト

HTTPレスポンス

www.example.ac.jp

/path/to/resource

をください

(36)

Webの簡単な仕組み

インターネット

Webサーバ

Webサーバ

Webサーバ

Webサーバ

(37)

用語

クライアント, Webブラウザ,

ユーザー

(38)

用語

クライアント

, Webブラウザ,

ユーザー

(39)

用語

クライアント,

Webブラウザ

,

ユーザー

(40)

用語

クライアント, Webブラウザ,

(41)

用語

クライアント, Webブラウザ,

ユーザー, (ユーザーエージェント)

サーバ, Webサーバ,

サイト, Webサイト

リソース, Webページ, 文書

HTML文書, コンテンツ

(42)
(43)

Webシステム

• URIとWebサーバ上のファイルが1対1に対応

• 静的なWebページ

• 同一のURIに対して、サーバやクライアントの

状態に応じたリソースを生成し、返却

 動的なWebページ

• Webシステム / Webアプリケーション

(44)

鉄道の経路・時刻の調査

冊子

パソコンの

(45)

インターネットショッピング

(46)

インターネットバンキング

(47)

予約・購入

(48)

予約・購入

• 航空券, 乗車券, 各種チケット

• 宿泊施設, 飲食店

• 病院, 美容室, その他来店予約

• レンタカー, 着物, その他レンタル予約

(49)

その他

• ソーシャル・ネットワーキング・サービス (SNS)

• 口コミ, フォーラム (電子掲示板)

• eラーニング (学習)

• Webメール

(50)

Webシステムの利点

• ソフトウェアのインストールが不要

• 異なる環境から同じデータを利用可能

(51)

ユーザーが持つデータ

ユーザー

ユーザー

ユーザー

(52)

ユーザーが持つデータ

Webシステム

ユーザー

ユーザー

ユーザー

(53)

Webシステムの利点

• ソフトウェアのインストールが不要

• 異なる環境から同じデータを利用可能

• システムの更新が容易

(54)
(55)
(56)
(57)

Webシステムの更新

(58)

Webシステムの更新

(59)

Webシステムの更新

(60)

Webシステムの利点

• ソフトウェアのインストールが不要

• 異なる環境から同じデータを利用可能

• システムの更新が容易

(61)

Webシステムの欠点

• Webサーバにアクセスできないと利用不可

• ネットワーク回線の速度の影響

(62)

Webにおける脅威

Webシステム

(63)

Webにおける脅威

Webシステム

盗聴

(64)

Webにおける脅威

Webシステム

盗聴

不正誘導

正規のユーザー

(65)

Webにおける脅威

Webシステム

盗聴

不正誘導

破壊・妨害

正規のユーザー

偽サイト

(66)

Webにおける脅威

Webシステム

盗聴

なりすまし

不正誘導

破壊・妨害

正規のユーザー

偽サイト

(67)

Webシステムの欠点

• Webサーバにアクセスできないと利用不可

• ネットワーク回線の速度の影響

(68)

Webのしくみと応用 ('15)

回 テーマ

1

身近なWeb

2

Webの基礎

3

ハイパーメディアとHTML

4

HTMLとCSS

5

HTTP (1)

6

HTTP (2)

7

動的なWebサイト

8

クライアントサイドの技術

回 テーマ

9

リレーショナルデータベース

10 SQLとデータベース管理

システム

11 認証とセッション管理

12 Webのセキュリティ

13 Webの応用 (1)

14 Webの応用 (2)

15 Webの応用 (3)

Webシステムの実現手法

ユーザ認証

セキュリティ

Webに関連した話題

Webシステムの応用例

(69)
(70)

インターネットショッピング

分類

内容

(71)

インターネットショッピング

分類

内容

商品データ 商品名, メーカー名, 寸法, 色,

在庫データ 商品ごとの在庫量など

(72)

インターネットショッピング

分類

内容

商品データ 商品名, メーカー名, 寸法, 色,

在庫データ 商品ごとの在庫量など

(73)

インターネットショッピング

分類

内容

商品データ 商品名, メーカー名, 寸法, 色,

在庫データ 商品ごとの在庫量など

顧客データ 名前, 住所, メールアドレス, 電話番号,

販売データ いつ(時刻), 何を(商品), いくつ(数量), 誰に(顧客)

(74)

データベース

データベース

ソフト

ウェア

ソフト

ウェア

ソフト

ウェア

販売 データ 顧客 データ 在庫 データ 商品 データ

(75)

データベース

データベース

データベース

管理システム

ソフト

ウェア

ソフト

ウェア

ソフト

ウェア

(76)

データベース

• データモデル / データベースモデル

• リレーショナルモデル

• リレーショナルデータベース

(77)

Webのしくみと応用 ('15)

回 テーマ

1

身近なWeb

2

Webの基礎

3

ハイパーメディアとHTML

4

HTMLとCSS

5

HTTP (1)

6

HTTP (2)

7

動的なWebサイト

8

クライアントサイドの技術

回 テーマ

9

リレーショナルデータベース

10 SQLとデータベース管理

システム

11 認証とセッション管理

12 Webのセキュリティ

13 Webの応用 (1)

14 Webの応用 (2)

15 Webの応用 (3)

データベース

(78)

第1回の内容

• World Wide Web

• Webシステム

参照

関連したドキュメント

ROKU KYOTO Autumn Parfait ~ Shine muscat &amp; Jasmine tea ~ ROKU KYOTO

(4) 現地参加者からの質問は、従来通り講演会場内設置のマイクを使用した音声による質問となり ます。WEB 参加者からの質問は、Zoom

ユーザ情報を 入力してくだ さい。必要に 応じて複数(2 つ目)のメー ルアドレスが 登録できます。.

※ログイン後最初に表示 される申込メニュー画面 の「ユーザ情報変更」ボタ ンより事前にメールアド レスをご登録いただきま

Webカメラ とスピーカー 、若しくはイヤホン

ユーザ情報を 入力してくだ さい。必要に 応じて複数(2 つ目)のメー ルアドレスが 登録できます。.

[r]

教職員用 平均点 保護者用 平均点 生徒用 平均点.