狠狠撸

情報編集 (web)
奥奥奥概论、これからのWWW

2013年4月9日
東京藝術大学芸術情報センター
担当：田所淳

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

? WWWの仕組み
? ハイパーテキスト
? マークアップ
? WWWを支える3つの仕組み(URI、HTTP、HTML)

? WWWのこれから
? HTML5とは何か?

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

インターネットの歴史
? インターネットの簡単な歴史
? 1957：ARPA創設
? 1962：J.C.R. 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設立
? 2004：Facebook設立

WWWに至る道
? WWWの成立に貢献した発明
? インターネットの技術の他にもう一つ重要な発明
? ハイパーテキスト(hypertext)
? 複数の文書を相互に関連付け、結び付ける仕組み
? ハイパーリンク：テキスト間を結びつける参照のこと

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

WWWに至る道
? memex (1945)
? ヴァネバー?ブッシュが"As We May Think" で発表した
コンピュータシステムの概念
? 一種の図書館と電気的に接続され、その図書館の本やフィ
ルムを表示でき、自動的に相互参照をたどって他の作品
（本やフイルム）を表示するデバイス

WWWに至る道
? テッド?ネルソン(Theodor Holm Nelson)
? Project Xanadu：コンピュータネットワーク上にハイパー
テキストを実現する計画 (1960)
? 「ハイパーテキスト」という用語を初めて使用 (1965)
? 後のWWWに多大な影響

WWWに至る道
? ダグラス?エンゲルバート(Douglas Carl Engelbart)
? NLSシステム(1968)
? ハイパーテキストインタフェース（と初の実用的なGUI）の
デモを公衆の前で初めておこなう
? "The Mother of All Demos"「すべてのデモの母」

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

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

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

WWWの誕生
? ティム?バーナーズ＝リー（Timothy John Berners-Lee)
? WWWの生みの親

WWWの誕生
? ティム?バーナーズ＝リーの ”World Wide Web”
? WWW開発の動機
? 欧州原子核研究機構（CERN）で数千人の研究者同士の情
報を行きわたらせるためのシステム構築を命じられる
? CERN - スイスのジュネーヴ郊外にある、世界最大規模の
素粒子物理学の研究所

WWWの誕生
? 各国に散らばっている実験者が瞬時に情報にアクセスしたい
? 同時に多くのコンピュータ間で同じ情報を共有したい
? 1990年、初のWWWブラウザ “WorldWideWeb” を発表
? http://www.w3.org/People/Berners-Lee/
WorldWideWeb.html

WWWの誕生
? ”World Wide Web スクリーンショット - 1

WWWの誕生
? ”World Wide Web スクリーンショット - 2

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

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

? NCSA Mosaic (1993)

? Netscape Navigator (1994)

? Internet Explorer (1995)

? Opera (1996)

? Mozilla (2002)

? Firefox (2002)

? Safari (2003)

? Google Crhome (2008)

? 参考: The Evolution of Web - Webの進化
? http://www.evolutionoftheweb.com/

HTMLを支える3つの仕組み
URL, HTML, HTTP

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

? 閲覧したいWebページのアドレスを入力
? 例：丑迟迟辫://补尘肠.驳别颈诲补颈.补肠.箩辫/驳耻颈诲别/补产辞耻迟

WWWのしくみ

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

http://amc.geidai.ac.jp

WWWのしくみ

? アドレスの残りの部分から、サーバ内の該当データを特定
? “/guide/about” の部分がこれに相当

/guide/about

WWWのしくみ

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

WWWのしくみ

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

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

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

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

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

URI

HTTP

HTTP

HTML

「贬罢惭尝5」とは何か?

HTML5とは何か?
? HTMLの新バージョン、HTML5とは何なのか?

HTML5とは何か?
? HTMLのテクノロジの変遷

? 1991 - HTML
? 1994 - HTML2
? 1996 - CSS1 + JavaScript
? 1997 - HTML4
? 1998 - CSS2
? 2000 - XHTML1
? 2005 - Ajax (Asynchronous JavaScript + XML)
? 2009 - HTML5

HTML5とは何か?
? 参考：HTML5までに至るバージョンの変遷

HTML5とは何か?
? 最大の変化をひとことで言うと…
? Web「文書」から「アプリケーションへ」

メーラー、地図、
文書ムービープレーヤー、
スケジューラーなど

HTML5とは何か?
? 例：Google+

HTML5とは何か?
? 例：ブラウザやウェブについて知っておきたい20のこと
? http://www.20thingsilearned.com/ja-JP

HTML5とは何か?
? The Evolution of Web - Webの進化
? http://www.evolutionoftheweb.com/

HTML5とは何か?
? 厳密に定義は、いろいろな意見が…

? 参考：どこまでがHTML5なの？
? http://www.publickey1.jp/blog/10/html5_9.html

広义の贬罢惭尝5と狭义の贬罢惭尝5

広義のHTML5

狭義のHTML5

? この授業では「広義のHTML5」をHTML5として解説します
? Webアプリケーションを実現するための技術全般として

HTML5による表現
? 参考サイト：Chrome Experiments
? http://www.chromeexperiments.com/

1学期、楽しくやっていきましょう!
最後にアンケート

狠狠撸

情報編集(Web) 130409

Recommended

More Related Content

Similar to 情報編集(Web) 130409 (20)

More from Atsushi Tadokoro (20)

情報編集(Web) 130409