網路歷史大哉問：你有想過今日的網頁為什麼長這樣嗎？

 

《100 Ideas that Changed the Web》講述了網路的歷史中 100 個重要的構想與點子，從 1934 年比利圖書館館員的幻想：一個可以儲存、把文件傳送到螢幕上的電子儀器，到全球資訊網的發明人 Tim Berners-Lee。在網路發展的歷史當中，有不少革命性的構想，例如 peer-to-peer 的概念，更多的是你平常已經習以為常的概念，像是 GIF 格式。

綜觀這段歷史，包含許多令人贊歎的科技成就、新的經濟模式、不被國家疆域限制的點子，甚至是改變世界的構想。也許在這當中最重要的突破，是把網路放開給全世界的人，如果沒有這樣做，網路世界將只會是工程師與程式設計師的小小後花園罷了。

不過現在，網路是世界上所有人的共享之地。我們從中挑選了六個你可能會感興趣的重要里程碑，讓我們來看看為什麼今時今日的網頁、網路會是這個模樣吧！

• 1. 圖形用戶界面（Graphical User Interface，簡稱 GUI）

靈感來源自 Vannevar Bush 與 Ivan Sutherland ，Engelbart 的 oNLine System（NLS）是第一個實施 GUI 的系統。真實的桌上電腦配上虛擬的視窗、選單、按鈕、文件。對當時整天面對一張張打孔卡、一行行程式碼的人來說，這實在是個激進的想法。當大部份的電腦科學家都專注讓電腦變得更聰明時，Engelbart 卻獨鍾於「讓電腦把人類變得更聰明」這件事上。

部分 Engelbart 的團隊參與了發展 Xerox Alto 系統，當時非常少數運作 Gui 的系統，不過可惜的 Xerox 並沒有繼續研發、精進 GUI。

不過，卻有個重要的人看到，並研發了後續的 GUI 產品，那就是 Steve Jobs。在 1983 年，蘋果推出了 Lisa 電腦，第一個使用 GUI 與滑鼠的家用電腦。微軟在受到蘋果的刺激之後，在同年推出了 Windows 1.0。

於此，Jobs 指控 Bill Gates 抄襲，不過 Gates 否認並說：

「認清現實好嗎？我們都有一個有錢的鄰居叫做 Xerox，家門永遠都是開的。然後你偷偷摸摸的進去他家準備幹走他的電視，然後發現我已經先偷走了。」

America Online 後來也跟上 GUI 的腳步，為大網路時代打開了大門。之後 Mosaic 在 1993 年問世，是網路歷史上第一個獲得普遍使用，並可以顯示圖片的網頁瀏覽器。

Mosaic 也成為 90 年代最流行的瀏覽器 Netscape Navigator 的前身，當時 Netscape Navigator 的口號為：「網路是每一個人的（The Web is for everyone）」。微軟也知道這句話是真的，於是複製大部分 Netscape 的基礎架構，推出了 Internet Explorer。到了 20 世紀 Netscape Navigator 衰亡，IE、Firefox、Safari 等大部份的瀏覽器都保有 Netscape 的模型。

不過追溯到源頭，如果當初沒有 Engelbart，也就是沒有 GUI 系統的話，網路也許不會風靡成今天這種情況。

• 2. 表情符號（The Emoticon）

1963 年 State Mutual Life 雇用了漫畫家 Harvey Ball，為了公司「友善（Friendship）」活動，創造了一個微笑的臉。他設計一個圓滾滾的黃臉，搭配上兩個小黑點當眼睛、一條曲線當作微笑的嘴巴。這個小黃笑臉只花了他 10 分鐘，就拿到 45 美元。

在 1970 年，Bernard 與 Murray 兩兄弟加上了一句話「Have a Nice Day.」，並售出了數百萬的相關商品。兩年後，Franklin Loufrani 給了這個小黃笑臉一個名字「Smiley」，法國的報紙將其用來標示正向的新聞故事。

當初 Harvey Ball 所設計的笑臉傳到了全世界，當有人問他，是否會後悔當初沒有為這個笑臉申請商標，他的回答十分哲學：「Hey, I can only eat one steak at a time.」。

而第一個在螢幕上出現的表情符號，則是在 1982 年的 Carnegie Mellon 大學。Scott Fahlman 在電腦科學的電子布告欄上使用了「:-)」與「:-(」。自此表情符號開始出現在網路世界。

原本以為這次的使用記錄早已無法追溯，沒想到 20 年後 Jeff Baird 從備份的磁碟中找到了這份資料。

Smiley 與其他表情符號的傳遞，也同時創造出更多的表情符號，像是有眨眼的 ;-)、笑開懷的 :-D、吐舌頭的 :-P，這些表情符號快速地被使用在 BBS 與網路上。

80 年代中期，日本的網路使用者推廣另外一種表情符號，與美式表情符號不同的是，日本的表情符號不用橫著看。例如 (*_*) 與 (^.^)、眨眼 (^_-)、困惑 (@_@) 以及在感受到壓力時使用的 (-_-;)，分號竟然代表著流汗！（日本將後來衍生出來的表情符號稱為顏文字）

直到了 90 年代中期，網路聊天室崛起，表情符號開始轉換成圖（image）的方式。即時通訊服務像是 ICQ、AOL 等提供了許多 icon 給使用者使用。到了 1997 年 Franklin Loufrani 的兒子 Nicolas 創造出 GIF 動畫字典，嘗試取代以文字組成的表情符號。至今已有超過 2,000 個圖案在其中，而現在許多平台都有自動將文字表情轉換成動畫、圖的功能。 

對於創造出「:-)」與「:-(」的 Scott Fahlman 來說，完全沒有想到當初小小舉動，將會影響到全世界的交流頻道。

• 3. GIF（Graphics Interchange Format）

GIF 今年才 20 多歲，只支援 256 個顏色，對於攝影照片來說可能不是個適合的格式，而表現也輸給 PNG 格式。但是，GIF 仍在網路世界上的各處閃耀，為什麼？只因為它會動！

CompuServe 在 1987 年引入 GIF 壓縮格式，體積小而成像相對清晰的 GIF 特別適合初期速度慢相對較慢的網路，因此大受歡迎。GIF 以 8 位元色，也就是 256 種顏色來呈現影像。採用 LZW 壓縮演算法進行編碼，有效地減少圖檔在網路上傳輸的時間。

而 GIF 真正起飛的年代則在 1993 年，世界第一個圖形瀏覽器 Mosaic 推出的那年，它支援兩種格式，GIF 與被稱作 XBM 的黑白格式。後來 Mosaic 變成了 Netscape，GIF 就在那繼續成長。

1994 年，Unisys 決定要加強他 LZW 演算法的專利，聲稱開發者必須為使用 LZW 演算法付費，這同時代表著必須要付費才能使用 GIF。不過在當時已經有另外一種新的格式正在成形，PNG（Portable Network Graphics），後來成為 World Wide Web Consortium（W3C）的標準。GIF 的生涯似乎要變得無比黯淡了。

1996 年，Netscape 2.0 推出，支援 GIF 動畫！整個網路世界就像瘋了，突然整個世界充滿了 GIF 動畫，跳舞的 baby、旋轉的 logo 等。

GIF 本身的限制與不用點擊就能觀看動畫的特性讓它變得無比迷人，只要短短的幾分鐘，就可以完成一個 GIF 動畫並放上網路給大家看。

• 4. 以使用者為中心設計（User-Centered Design，簡稱 UCD）

UCD 之父可以說是 William Fetter，來自美國波音公司的設計師。在 1960 年，他發明了術語「Computer Graphics」、1964 年以人類的身體為基底打造了第一個電腦模型，也是我們熟悉的「Boeing Man」。這些由框線組成的機師被當成假想的人類，用來設計出符合人體工學的駕駛艙，確保機師可以碰觸到駕駛艙內的各項儀器。這項設計開啟了以人為中心設計的開端。

而當網頁剛開始出現時，根本沒有人把設計當成一回事。當時的網頁只是夾雜著超連結的簡單文字檔，唯一需要設計的地方就是字體大小。

後來桌上型電腦的出現。那時網路世界被工程師以及程式設計師所控制，網頁以提供資訊優先，而且格式固定。直到網路開始發展到圖形的環境，layout 才慢慢成為一回事。

一團混亂的網頁世界，直到昇陽電腦的工程師，易用性之父 Jakob Nielsen 在 1995 年發佈了他的個人網站 useit.com。在當時 Jakob Nielsen 的想法受到很大的爭議，不過卻是網頁可用性（web usability）的標識燈塔。他嘗試以人的觀點來設計，而非系統導向的基礎。Don Norman，Jakob Nielsen 的商業夥伴說：

我們一定要以人類真正會有的行為來做設計，而不是由我們希望他們怎麼做。

Steve Krug 對於易用性的想法就比較沒有爭議，他對於 UCD 的見解可以濃縮成一句精華：

不要讓使用者還要動腦想（Don’t Make Me Think.）。

• 5. 資訊圖表（Infographics）

網路給我們的資訊量是以往所不能比擬的。

Infographic 就是 information + graphic 的組合，透過圖像的力量讓生硬的數據資料顯出趣味與生命力，也讓讀者可以輕鬆地理解並在腦海中留下深刻的印象。

將資訊視覺化並不是一個新的技術，人類幾千年來一直以來都用標記、畫圖、製作地圖的方式來處理資訊。不過真的資訊圖表發展的歷史並不超過 100 年。1925 年，在維也納的 Social and Economic 博物館中，Otto Neurath 發明了我們今日所見的資訊圖表。

「ISOTYPE」（International System of Typographic Picture Education）是 Otto Neurath 於 1925 年發表，經過系統化設計的圖畫形文字，他期望透過這種圖像來取代文字，形成全世界共通的語言，雖然最後失敗了，Isotype 的概念在 ICON 與標識等設計領域有非常深遠的影響。

而統計學家 Edward Tufte 則是可視化資料的先鋒，他開設了一門「統計圖形學」課程，之後與另外一位資訊設計領域的先驅人物 John Tukey 共同發展了這門課程。1982 年 Edward Tufte 出版了第一本資訊設計的專業書籍《 The Visual Display of Quantitative Information》，當時這本書引起了非常大的轟動。

根據 Edward Tufte 的論點，呈現資訊的時候，設計師應該將沒有用的線條、圖像去除掉，這樣才能以最明瞭、直接的方式，呈現資料內容。留下來的應該是最有意義的「data-ink」。剩下的只是沒有意義的「 Chart Junk」。

在社群網路的崛起同時，人們也越來越不願意看落落長的文件，這正是資訊圖表爆炸發展的時刻，也漸漸變成在我們每日可見到的媒體上出現。

資訊圖表，可以說是藝術與科學的交集，同時表現出創意與分析的思考。不過很殘酷的，資訊圖表若做得不好，就只是一些垃圾，不過做得好，卻可以讓資料變得美麗、意義非凡而且具備娛樂性。

• 6. Responsive Web Design（自適應、響應式網頁設計）

字面上的意義，就是說一個網頁在不同的解析度、螢幕大小，會呈現不同的界面。之所以會在現代成為炙手可熱的寵兒，都要歸功於行動裝置（智慧型手機、平板），甚至是智慧型電視的興起。傳統只為 PC 所設計的網頁，在行動裝置上並不一定能呈現最好的效果。

此概念在 2010 年 5 月由國外著名網頁設計師 Ethan Marcotte 所提出。