オリエンテーション・web概論 - 芸大web演習

35
芸術情報演習デザイン(Web) Web デザイン演習A 第1回:オリエンテーション, Web概論 2011年4月11日 担当:田所淳

Upload: atsushi-tadokoro

Post on 11-Jul-2015

1.826 views

Category:

Education


1 download

TRANSCRIPT

Page 1: オリエンテーション・Web概論 - 芸大Web演習

芸術情報演習デザイン(Web)Web デザイン演習A第1回:オリエンテーション, Web概論2011年4月11日担当:田所淳

Page 2: オリエンテーション・Web概論 - 芸大Web演習

自己紹介‣ この授業の担当:田所 淳 (たどころ あつし)‣ 東京芸術大学での非常勤講師の他‣ 多摩美術大学情報デザイン学科情報芸術コース 非常勤講師‣ 千葉商科大学 非常勤講師

‣ プログラミングの出会いは、コンピュータ音楽から‣ 徐々に、音の視覚化や、生成的なグラフィックス表現へ

Page 3: オリエンテーション・Web概論 - 芸大Web演習

‣ 去年、本を出しました !!

自己紹介

Beyond InteractionメディアアートのためのopenFrameworksプログラミング入門

田所 淳, 比嘉 了, 久保田 晃弘ビー・エヌ・エヌ新社 (2010/2/21)

※ openFrameworks については、後期に開講される「グラッフィクスプログラミングB」で扱う予定です

Page 4: オリエンテーション・Web概論 - 芸大Web演習

自己紹介‣ http://yoppa.org/‣ 授業資料、サンプルコードなどは全てアップしていく予定

Page 5: オリエンテーション・Web概論 - 芸大Web演習

今日の内容‣ WWWの歴史を駆け足で‣ インターネット ≠ WWW‣ インターネットの簡単な歴史‣ WWWへ至る道

‣ WWWとはなにか‣ ハイパーテキスト‣ マークアップ

‣ WWWを支える3つの仕組み‣ URI‣ HTTP‣ HTML

Page 6: オリエンテーション・Web概論 - 芸大Web演習

WWWの歴史‣ 「インターネット = WWW」ではない‣ WWWは、インターネット上の一機能でしかない‣ WWW以前のインターネットの主要機能‣ telnet:遠隔にあるサーバを端末から操作‣ ftp:ホスト間のファイル転送‣ email:メール‣ UUCP:ネットニュース‣ archie:ファイル検索

‣ WWW以前にもインターネットには長い歴史がある

Page 7: オリエンテーション・Web概論 - 芸大Web演習

インターネットの歴史‣ インターネットの簡単な歴史‣ 1957:ARPA創設‣ 1960:Joseph Carl Robnett Licklider、タイムシェアリングシステムの概念の発表

‣ 1969:ARPANET始動、UCLAとスタンフォード大‣ 1971:初のemailを送受信‣ 1979:USENET開始‣ 1983:TCP/IPの採用‣ 1990:ARPANET終了‣ 1991:Tim Berners-Lee、WWW発表‣ 1993:Mosaic発表 (後のNetscape)‣ 1995:Yahoo! 設立‣ 1998:Google設立

Page 8: オリエンテーション・Web概論 - 芸大Web演習

WWWに至る道‣ WWWの成立に貢献した発明‣ インターネットの技術の他にもう一つ重要な発明

‣ ハイパーテキスト(hypertext)‣ 複数の文書を相互に関連付け、結び付ける仕組み‣ ハイパーリンク:テキスト間を結びつける参照のこと

Page 9: オリエンテーション・Web概論 - 芸大Web演習

WWWに至る道‣ ヴァネバー・ブッシュ (Vannevar Bush)‣ 論文 “As We may think (我々が考えるように)” (1945)‣ 図書館的な情報検索システムは情報の増加に追いつかない‣ 連想の網の中で多くの知識を格納する → ハイパーテキスト

Page 10: オリエンテーション・Web概論 - 芸大Web演習

WWWに至る道‣ memex (1945)‣ ヴァネバー・ブッシュが"As We May Think" で発表したコンピュータシステムの概念

‣ 一種の図書館と電気的に接続され、その図書館の本やフィルムを表示でき、自動的に相互参照をたどって他の作品(本やフイルム)を表示するデバイス

Page 11: オリエンテーション・Web概論 - 芸大Web演習

WWWに至る道‣ テッド・ネルソン(Theodor Holm Nelson)‣ Project Xanadu:コンピュータネットワーク上にハイパーテキストを実現する計画 (1960)

‣ 「ハイパーテキスト」という用語を初めて使用 (1965)‣ 後のWWWに多大な影響

Page 12: オリエンテーション・Web概論 - 芸大Web演習

WWWに至る道‣ ダグラス・エンゲルバート(Douglas Carl Engelbart)‣ NLSシステム(1968)‣ ハイパーテキストインタフェース(と初の実用的なGUI)のデモを公衆の前で初めておこなう

‣ "The Mother of All Demos"「すべてのデモの母」

Page 13: オリエンテーション・Web概論 - 芸大Web演習

WWWに至る道‣ アスペン・ムービーマップ (1977)‣ 初のハイパーメディアアプリケーション‣ アスペンの街をバーチャル旅行することができる‣ コマ撮りされた大量の写真がリンクされている

Page 14: オリエンテーション・Web概論 - 芸大Web演習

WWWに至る道‣ HyperCard (1987)‣ Apple Compuerのビル・アトキンソン(Bill Atkinson)‣ ハイパーテキストを実現した初の商用ソフトウェア‣ リンクで結合されたカードの集積をスタックとして扱う‣ ネットワークには未対応

Page 15: オリエンテーション・Web概論 - 芸大Web演習

WWWに至る道‣ HyperCardカードのスタックの例‣ “The Manhole” (1989)‣ ハイパースペース上でのインタラクティブ小説

Page 16: オリエンテーション・Web概論 - 芸大Web演習

WWWの誕生‣ ティム・バーナーズ=リー(Timothy John Berners-Lee)‣ WWWの生みの親

Page 18: オリエンテーション・Web概論 - 芸大Web演習

WWWの誕生‣ ティム・バーナーズ=リーの ”World Wide Web”‣ 各国に散らばっている実験者が瞬時に情報にアクセスしたい‣ 同時に多くのコンピュータ間で同じ情報を共有したい‣ 1990年、初のWWWブラウザ “WorldWideWeb” を発表

Page 19: オリエンテーション・Web概論 - 芸大Web演習

WWWの誕生‣ ティム・バーナーズ=リーの ”World Wide Web”

‣ 開発にはNeXTコンピュータを使用‣ Appleを追放されたスティーブ・ジョブスが設立した‣ 先進的で洗練されたGUIと開発環境

Page 20: オリエンテーション・Web概論 - 芸大Web演習

Webブラウザの発展‣ VioliaWWW (1991)

Page 21: オリエンテーション・Web概論 - 芸大Web演習

Webブラウザの発展‣ NCSA Mosaic (1993)

Page 22: オリエンテーション・Web概論 - 芸大Web演習

Webブラウザの発展‣ Netscape Navigator (1994)

Page 23: オリエンテーション・Web概論 - 芸大Web演習

Webブラウザの発展‣ Internet Explorer (1995)

Page 24: オリエンテーション・Web概論 - 芸大Web演習

Webブラウザの発展‣ Opera (1996)

Page 25: オリエンテーション・Web概論 - 芸大Web演習

Webブラウザの発展‣ Mozilla (2002)

Page 26: オリエンテーション・Web概論 - 芸大Web演習

Webブラウザの発展‣ Firefox (2002)

Page 27: オリエンテーション・Web概論 - 芸大Web演習

Webブラウザの発展‣ Safari (2003)

Page 28: オリエンテーション・Web概論 - 芸大Web演習

Webブラウザの発展‣ Google Crhome (2008)

Page 29: オリエンテーション・Web概論 - 芸大Web演習

‣ 自分のPCでWebページを見ているとき、何が起っているのか

2.閲覧したいWebページのアドレスを入力‣ 例:http://www.geidai.ac.jp/facilities/infocenter.html

WWWのしくみ

Page 30: オリエンテーション・Web概論 - 芸大Web演習

‣ 自分のPCでWebページを見ているとき、何が起っているのか

1. Webブラウザは、アドレスからサーバの場所を探しだす‣ “http://www.geidai.ac.jp” の部分がこれに相当

WWWのしくみ

http://www.geidai.ac.jp

Page 31: オリエンテーション・Web概論 - 芸大Web演習

‣ 自分のPCでWebページを見ているとき、何が起っているのか

2. アドレスの残りの部分から、サーバ内の該当データを特定• “/facilities/infocenter.html” の部分がこれに相当

WWWのしくみ

/facilities/infocenter.html

Page 32: オリエンテーション・Web概論 - 芸大Web演習

WWWのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか

3. Webページのデータをサーバから手元のPCに送信

Page 33: オリエンテーション・Web概論 - 芸大Web演習

WWWのしくみ‣ 自分のPCでWebページを見ているとき、何が起っているのか

4. PC側で受信した情報から、Webページを生成し表示

Page 34: オリエンテーション・Web概論 - 芸大Web演習

WWWを支える3つの仕組み‣ URI (もしくは URL)‣ Uniform Resource Identifier‣ ネットワーク上の情報を一意に特定するアドレス指定方法

‣ HTTP‣ HyperText Transfer Protocol‣ コンピュータ同士が情報をやりとりするルール

‣ HTML‣ HyperText Markup Language‣ 環境にかかわりなくWWWを記述するための文書記述言語

Page 35: オリエンテーション・Web概論 - 芸大Web演習

WWWのしくみ‣ 先ほどの例でいうと‣ 3つのしくみ(URI, HTTP, HTML) について理解する

HTTP

HTTP

HTML

http://www.idd.tamabi.ac.jp/art/index.phpURI