资讯频道 → Web前端
阅读更多

3顶
0踩

Web前端

转载新闻 9个GIF动画阐述Web设计的25年历史

2014-12-11 11:21 by 正式编辑 cao345657340 评论(1) 有6218人浏览
web flash css
Web设计25年的历史，可以用以下9个GIF动画来总结。

Froont，一家为web设计师制作工具的旧金山公司，用9个GIF格式动画来表现网页设计在过去25年的发展历程。如果你想知道为什么CSS这么重要，为什么Flash会逐渐淘汰，这些动画图或许能让你一窥究竟。



网页设计的单色时代，约1989年。想想Lynx和其他以Unix为基础的web浏览器，这些浏览器只会通过网络从这个终端到另一个终端一个字一个字地蹦出来。没有图形用户界面，只有一串字母和一个闪烁的光标。



现代化的开始，约1995年。第一个浏览器，例如Mosaic，允许设计人员在网站上显示图片，但是唯一的方法是将这些网页元素丢进不雅的表格布局中。由于这真的很难精确定位，所以设计师得琢磨地非常清楚如何写好表格嵌套表格再嵌套表格的代码以便正确显示内容。



幸运的是，JavaScript出现了，为设计师提供了很大的便捷。Flash让我们创建动态网站的设计更为简便：例如，弹出窗口和在页面上动态修改内容顺序。但是相较于本地HTML，JavaScript速度很慢。


尽管Flash也曾风靡一时，但是现在几乎已经被HTML5干掉了，但是在1996年，它代表了网页设计的一个新高度：能够让设计师按他们自己的方式使得页面生动起来。这也是Froont飞出页面和开场动画等的黄金时代。但是，Flash会占用计算机大量的处理资源，这也使得它成为一种特别不友好的技术，尤其是对于移动设备例如笔记本电脑和智能手机而言。



CSS，首次发布于1998年，解决了很多早期的web设计问题。通过将网站美观度从网页内容中剥离出来，设计师终于可以按照自己的想法制作或者为客户定制网页了。虽然最早的CSS版本不是非常灵活，但是现在的CSS已然成为了设计师需要掌握的最重要的网络技术。



2007年iPhone的问世给设计人员带来了一个全新的难题：如何在智能手机这个更小的屏幕上设计网页？一开始设计人员想到的是使用一种网格系统，这种网格系统可以根据设备屏幕的尺寸将网页分割成若干列。



2010年，对于如何在移动设备显示网页的问题，Ethan Marcotte想到了另一种解决方案：响应式设计。



在响应性设计之后，一种撇去华丽效果重视内容的扁平化设计也出来了。这种设计简化了视觉元素，通过突出漂亮的字体来创建web体验，而且显示在任何设备上的效果都非常棒。



至于未来会如何？Froont表示，更好的web设计还在研究开发中。以后，设计人员将不需要再担心浏览器的兼容性问题，各种适用于任何设备的工具也都随手可得。以后的技术将不会再成为设计的限制，设计师可以集中精力解决UI和UX问题，而不是把时间浪费在排除故障上。
  • 大小: 25.7 KB
  • 大小: 97.5 KB
  • 大小: 62.3 KB
  • 大小: 351.5 KB
  • 大小: 454.7 KB
  • 大小: 208.1 KB
  • 大小: 746.1 KB
  • 大小: 360.5 KB
  • 大小: 385.7 KB
来自: 码农网
3
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 hejinguo727 2014-12-11 12:46
挺有意思的。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 微软的面试题及答案－超变态但是很经典

    转载: 第一组 　　1.烧一根不均匀的绳，从头烧到尾总共需要1个小时。现在有若干条材质相同的绳子，问如何用烧绳的方法来计时一个小时十五分钟呢? 　　2.你有一桶果冻，其中有黄色、绿色、红色三种，闭上眼睛抓取同种颜色的两个。抓取多少个就可以确定你肯定有两个同一颜色的果冻? 　　3.如果你有无穷多的水，一个3公升的提捅，一个5公升的提捅，两只提捅形状上下都不均匀，问你如何才...

  • 据说是微软的面试题——答案部分

    转来研究一下思想 第一组题答案： 　　1)三根绳，第一根点燃两端，第二根点燃一端，第三根不点　　第一根绳烧完(30分钟)后，点燃第二根绳的另一端，第二根绳烧完(45分钟)后，点燃第三根绳子两端，第三根绳烧完(1小时15分)后，计时完成　　2)根据抽屉原理，4个　　3)3升装满;3升-〉5升(全注入);3升装满;3升-〉5升(剩1升);5升倒掉;3升-〉5升(注入1升);3升装满;3升-〉5升;

  • 微软的面试题

    第一组 1.烧一根不均匀的绳，从头烧到尾总共需要1个小时。现在有若干条材质相同的绳子，问如何用烧绳的方法来计时一个小时十五分钟呢？ 2.你有一桶果冻，其中有黄色、绿色、红色三种，闭上眼睛抓取同种颜色的两个。抓取多少个就可以确定你肯定有两个同一颜色的果冻？ 3.如果你有无穷多的水，一个3公升的提捅，一个5公升的提捅，两只提捅形状上下都不均匀，问你如何才能准确称出4公升的水？ 4.一个岔路口分别通向诚...

  • 微软的面试题（答案）

     ★为什么下水道的井盖是圆的？ 因为圆井盖不会掉进下水道去，因为方井盖对角线明显长于边长，稍微角度不对就掉进去了，其他非圆形井盖也有这个问题。 : : 　　★美国有多少辆车？(一个常见的类似问题是：美国有多少家加油站？) 大约一亿辆车，算上公司的车，差不多平均每个家庭一辆车。 : : 　　★美国有多少个下水道井盖？ 缺少数据，比如美国公路总长度之类的数据 : : 　　★你让某些人为你工作了七天，

  • css使两个盒子并列_CSS常见面试题

    阅读本文约需要9分钟大家好，我是小蔡，接下来开始今天的技术分享！上段时间跟大家分享了Vue 之响应式系统的知识，今天跟大家分享下CSS常见面试题的知识。1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有...

  • web前端面试题之html&css篇

    (1)HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言 (2)最主要的不同 (3)XHTML元素必须被正确地嵌套。 (4)XHTML元素必须被关闭 (5)标签名必须用小写字母 (6)XHTMl文档必须拥有根元素 2.什么是语义化...

  • web前端常见面试题汇总

    1.输入完网址按下回车，到看到网页这个过程中发生了什么？ a.进行域名解析； b.进行与TCP3次握手； c.建立与TCP连接后并发起Http请求； d.浏览器解析HTML代码，请求HTML代码的资源; e.浏览器对页面进行渲染并呈现给...

  • 《Web前端工程师修炼之道》学习笔记

    第一部分 开始起步 博客托管发布站点：WordPress,Blogger,Tumblr,Squarespace 样式模版学习：Samantha Warren的文章“Style Tiles and How They Work”...学习自适应web设计：《Reponsive Web De

  • [置顶] 微软面试题及答案

    1.烧一根不均匀的绳，从头烧到尾总共需要1个小时。现在有若干条材质相同的绳子，问如何用烧绳的方法来计时一个小时十五分钟呢? 2.你有一桶果冻，其中有黄色、绿色、红色三种，闭上眼睛抓取同种颜色的两个。抓取多少个就可以确定你肯定有两个同一颜色的果冻？ 3.如果你有无穷多的水，一个3公升的提捅，一个5公升的提捅，两只提捅形状上下都不均匀，问你如何才能准确称出4公升...

  • 微软经典面试题(附答案)

    微软经典面试题(附答案) 想要公司盈利？还得依靠系统！-在线咨询！ 2006-08-08 14:07　　来源: 名牌有名牌的理由，就连招聘也与众不同。微软公司的招聘一向都是人们议论的话题，说它百般刁难的有之……

  • 最全面、最详细web前端面试题及答案总结

    2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太...

  • web前端常见面试题

    匹配一年中的12个月 5.匹配qq号最长为13为 6.匹配常见的固定电话号码 7.匹配ip地址 8.匹配用尖括号括起来的以a开头的字符串 9.分割数字每三个以一个逗号划分 10.判断字符串是否包含数字 11.判断电话号码 12.判断是否...

  • 最新web前端面试题

    为什么没有办法定义 1px 左右的宽度容器，解决办法: （IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px） 9.IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片 对 WEB 标准以及 W3C 的...

  • 第136天：Web前端面试题总结（理论）

    Web前端面试题总结 HTML+CSS理论知识 1、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么 　a.域名解析 　b.发起TCP的3次握手 　c.建立TCP连接后发起http请求 　d.服务器端响应http请求，浏览器得到...

  • Web 前端面试题总结

    3.第一次页面加载会触发哪几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解？ vue路由面试题 1.mvvm 框架是什么？ 2.vue-router...

Global site tag (gtag.js) - Google Analytics