文档章节

9個GIF動畫 ,看懂Web 演化史

Adam_OuYang
 Adam_OuYang
发布于 2014/12/17 00:33
字数 1090
阅读 5
收藏 0

圖片來源:Froont

本文來源: 9個GIF動畫 ,看懂Web 演化史 (附圖)

之前,介紹過一系列的Infographics 立即上手-高質感資訊圖表文章,這次來聊聊Web的演化歷史。

Froont位於舊金山,是一家專門開發網頁設計師製作工具的公司。他們設計了一系列的Gif圖來說明過去25年網頁設計的演進情形

如果你還不知道CSS為何會如此重要,或者Flash為何會被淘汰,以下的Gif圖將可以解釋這些過程:

網頁設計的暗黑時代(1989)

大概在1989年,屬於網頁設計的單色顯示器(Monochrome)世代,當時只能透過Lynx跟Unix所的開發的瀏覽器,將終端機的文字透過大學網路傳送到另一端。沒有使用者介面,只有一串文字及閃爍的指標(cursor)。

Tables – 起源(1995)

大概在1995,進入了摩登世代。設計師開始能透過Mosaic之類的瀏覽器,使用Table排版的方式,在網站上面呈現圖片。

但是,使用Table排版比較難以準確將圖片定位。讓設計師常常需要耗費許多時間思考如何在表格中的表格內顯示正確的內容。

JavaScript 即刻救援 (1995)

幸運的是,對設計師來說,Javascript讓事情變更簡單。而Flash讓動態網頁更容易實現。例如,製作彈出視窗,或者直接在頁面中進行動態排序。

但,Javascript在當時的速度仍比原生HTML慢很多。

自由的黃金時代 – Flash (1996)

雖然Flash現在被HTML5打垮,但是在1996年,對網頁設計而言,Flash代表著全新的自由,讓設計師能根據他們想要的任何方式來設計動畫,也是Froont的介紹頁面及前導頁面的黃金時代。

不幸的是,由於Flash佔用太多的效能,不利於應用在移動裝置(例如: 筆電、智慧手機)。

CSS (1998)

CSS於1998年正式釋出,解決了很多當時設計網站的問題。將網站的樣式與內容分開來管理,讓設計師可以更有彈性的製作出他們想要的網站。雖然早期的版本不夠靈活,但是CSS仍成為設計網站最重要的技術。

移動裝置起義 – 自適應 (2007)

2007年,iphone出現了,但也帶來了一個全新的問題: 我們如何將在智慧手機的小螢幕上設計網站。

一開始,設計師使用網格系統來解決這個問題,藉由網格中的欄位能依照網站的尺寸來進行自適應調整。

響應式設計 (2010)

2010年,Ethan Marcotte想到另一個方式來解決網頁在移動裝置的問題: 響應式設計(responsive design)。

扁平化的到來 (2010)

當響應式設計開始流行時,我們同時也開始趨向於扁平設計(flat design),去除掉不必要的華麗,而傾向於內容的呈現。內容使用簡單的元素及設計字體,讓網站在任何裝置上都能有很好的體驗。

光明的未來 (2014)

關於後續的發展,Froont 說,具有靈活性且完美的網站設計方法,仍在研究中。但是很快的,設計師將不必擔心瀏覽器兼容性的問題。因為各種適應多平台的工具將越來越容易獲得,讓他們不必再浪費時間處理技術問題及錯誤訊息,可以專注在設計,解決UI及UX的問題。

如果你喜歡這些GIF文件,可以參考Froont的:用GIF動畫解釋響應式和自適應網路之間的區別。

原文出處:[The History Of Web Design Explained In 9 GIFs] 中文轉貼出處:9個GIF動畫 ,看懂Web 演化史

本文转载自:http://adon988.logdown.com/posts/246175-9-animation-read-the-web-history

Adam_OuYang
粉丝 0
博文 17
码字总数 743
作品 0
台北
程序员
私信 提问
如何使用自訂 Segue 實現視圖轉場動畫

建立一個自訂segue不是困難的事,因為它包含了 iOS 的標準程式技術。實際上所需要的是,作為 UIStoryboardSegue 類別的子類別(subclass),並且只要覆寫(override)一個稱作 perform的方法...

issac宝华
2016/08/25
9
0
plymouthd 是什么以及如何停用

剛用min安裝方式安裝了CentOS 6 x86版本, 用top發覺plymouthd佔用50%的CPU時間,初步知道是GRUB動畫開機的一部份, 網上發現: " 您可以以 root 身份使用指令 plymouth-set-default-plugin 切換...

红薯
2012/07/23
5.4K
1
path button

我是基於這個修改的:http://www.oschina.net/p/pathbutton/similarprojects 改它的理由如下: 1、它原來這個沒有自適應不同的位置,例如想改到上方或者左上角,就比較麻煩。 2、它原來這個沒...

若奇
2013/03/03
5.8K
4
在 Google 涂鸦也是正事

Google 塗鴉小組的 Jennifer Hom 他們慶祝小精靈電玩的週年慶、愛因斯坦的生日、世界盃足球、波斯新年,甚至美國大選,和所有值得紀念的日期和事件。誰這麼閒?答案是Google的塗鴉小組。 這一...

红薯
2010/09/07
349
2
WP7 - Marketplace Test Kit(转载)

這是7.1版本多出來的一個功能,大概是很多開發者上傳APP一直被打槍吧(我最近有個APP也是猛被退阿), 所以把一些比較基礎可以用程式測試的東西做成一個kit, 讓開發者可以先測試一下,或是準備...

junwong
2012/02/24
163
0

没有更多内容

加载失败,请刷新页面

加载更多

好程序员web前端分享逻辑运算

  一门计算机语言,编程的核心在于逻辑思想,当我们在编写程序的时候,逻辑是否通顺,是能否正确写出程序的关键,可以说如果你掌握了逻辑,那么你就踏入了计算机编程的大门。 &&与 || 或 ...

好程序员IT
10分钟前
0
0
我的Linux系统开始学习的过程

我的Linux系统开始学习的过程 Linux系统,不知大家是否了解。接触计算机不多或对计算机不感冒的人可能对其比较陌生,曾经的我也是。上大学前的我的确对Linux一无所知,那时候接触面窄,都没有...

linuxCool
10分钟前
0
0
让自己的网站可以被搜索

第一步:先注册一个属于自己的域名,这个域名是独一无二的。推荐到主机屋注册一个,其实在哪里注册都是一样的,但是主机屋提供免费的地址解析服务(只对在主机屋注册的域名免费)。 主机屋官...

WinkJie
13分钟前
0
0
全站加速(DCDN)- IP应用加速产品解读

5月22日下午15点,阿里云全站加速(DCDN)-IP应用加速如期发布。IP应用加速是阿里云自主研发的一款更高效、更安全、更便捷的动态加速产品,结合阿里云CDN本身的资源优势,利用就近接入、智能...

阿里云官方博客
16分钟前
0
0
k8s常用命令

1.创建deployment资源kubectl apply -f nginx.yml2.删除deployment资源kubectl delete -f nginx.yml3.查看deployment资源基本信息deployment资源(运行的服务资源)kubectl get...

平头哥-Enjoystudy
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部